css vertical-align 图片居中多行文字居中

最新推荐文章于 2024-03-11 20:25:07 发布

日出晨安

最新推荐文章于 2024-03-11 20:25:07 发布

阅读量934

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u014652770/article/details/23679317

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

当要将一行中的文字要放在一行中的中间的时候往往设置line-height与父元素的高度相同

<div>

<span>我要在中间</span>

</div>

可是这样在效果上好像有一些小的误差，这时候可以直接设置vertical-align设置为Middle，此时将看到文字已经精确的在父元素的中间。

图片也是这样的

<style>

div{

height:50px;

line-height:50px;

}

div span{

vertical-align:middle;

}

div img{

height:30px;

width:30px;

vertical-align:middle;

}

</style>

<div>

<span>我要在中间</span>

</div>

设置img元素的vertical-align:middle,可使之在父元素的中间。

此处的疑问是给图片设置vertical-middle时，需要设置所在行的line-height，由此可以看出vertical-align是相对于本行的行高来进行定位元素的，因为行内元素总是和本行的行高最高的元素对齐，所以当本行中的某一个行内元素的行高最高时，会按照他的行高进行定位，这与其父元素的高度无关

1.如何将一个图片放在div中的正中间

在一行之中，所有的行内元素组成一个看不见的行框（行内框和行框不一样），这个行框的行高是有在这一行中的所有的行内元素中行高的最高的那个行内框决定的，之后这行中的内容就按照这个行框的高度排列

<div>
<span class="first">第一个行内框</span>
<span class="second">第二个行内框</span>
</div>

其中的first也会按照40px进行排列，与second同行

另外行高有一个重要的特性是内容的中间会和行高（行框的高度）的中间在一条线上

vertical-align属性值得middle就是将元素的中间与行高的中间对齐，因此要将图片的放在中间，要将该行的行高设为与height相等（获取不用设置高度，直接设置line-height，会将高度撑开），然后将img的vertical-align设置为middle

由于line-height第对元素两行字体之间的距离而言的，那么就必须有文字存在而使行框的行高存在（撑开div）

或者

是实现不了上述效果的，原因是没了文字。line-height就失效了，就无法撑开父元素，所以就必须有文字存在才行，要想没有文字存在，则需要将文字设置为一个空格，并将文字的大小设置为font-size：0

.imgblock{
line-height:500px;
text-align:center;
}
.first{
vertical-align:middle;
font-size:0;
}
.img{
vertical-align:middle;
}

</style>

<div class="imgblock">
<img class="img" src="css/images/companytemp.jpg">
<span class="first"> </span>
</div>

2.实现多行文字在一个div中居中

.imgblock{
height:500px;
width:100%;
text-align:center;
}
.content{
display:inline-block;//使div变为行内框，为了设置它的宽度，所以还需要具有块框性质，设置为inline-block
height:50px;
width:50px;
vertical-align:middle;
}
.line{
display:inline-block;
line-height:500px;
font-size:0;
width:0;
}
</style>

<div class="imgblock">
<div class="content">
我我我我我我我我
</div>
<div class="line"> </div>
</div>