亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS居中實例之大小不固定的圖片居中方法

  發(fā)布時間：2017-12-20 16:29:30   作者：ken_ding   我要評論
本篇文章主要介紹了CSS居中實例之大小不固定的圖片居中方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了CSS居中實例之大小不固定的圖片居中方法，分享給大家，具體如下：

1.利用table-cell實現(xiàn)垂直居中

<div class="box1">
    [站外圖片上傳中……(5)]
</div>
div{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

利用父元素為display:table-cell類型實現(xiàn)垂直居中，table在ie8+的瀏覽器中自帶的垂直居中的屬性。  

注意：img{vertical-align: middle;}只是為了消除display:inline-block類型的基線對齊問題。

2.多行文本的垂直居中方法

 有時可能我們會遇到需要多行文本垂直居中的一些情況，但是做起來有時有些麻煩，需要我們換個思路去實現(xiàn)。

<div class="box3">
    <span>你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)</span>
</div>
div{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

將內(nèi)部的文本用span標簽（其他標簽也可以）包裹起來，把span標簽設(shè)為inline-block,然后當(dāng)圖片的垂直居中處理(ie8+)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論