vertical-align属性
jiameil
2015-11-17 17:13
文字会相对于图片垂直居中，但图片并没有垂直居中。不知道怎么回事
5回答
-
- 李晓健
- 2015-11-17 18:48:08
.div1{ border:1px solid #777; width:330px; height: 250px; line-height: 250px; } .div1 > span{ display: inline-block; width: 210px; vertical-align: middle; } .div1 > img{ width: 100px; height: 100px; vertical-align: middle; }div 加一个line-height就好了
-
- jeSus_sCroSs
- 2017-08-18 15:32:10
我个人的一些看法：pc端float左右即可，很容易达到，vertical更适合移动端，所以不建议把li的height写死，可以写一个max-height限高；
但是问题就是 img图片尺寸最好宽高一样
-
- jeSus_sCroSs
- 2017-08-18 15:29:58
.uler{
margin:100px;
}
.uler li{
width:300px;border: 1px solid #fff;padding:5px 0px;
max-height: 100px;
}
.uler li span{
writing-mode: vertical-lr;
display: inline-block;width:210px;
vertical-align: middle;
}
.uler li span a{
height:14px;line-height: 14px;
text-indent: 15px;
writing-mode: lr;
font-size: 14px;
color:#fff;
}
.uler li img{
vertical-align: middle;
}
</style>
<body>
<ul class="uler">
<li>
<span>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
</span>
<img src="img/009.png" />
</li>
</ul>
-
- jiameil
- 2015-11-17 18:01:22
<div class="div1">
<span>文字在脑子里了</span>
<img src="1.jpg">
</div>
.div1{
border:1px solid #777;
width:330px;
height: 250px;
}
.div1 > span{
display: inline-block;
width: 210px;
vertical-align: middle;
}
.div1 > img{
width: 100px;
height: 100px;
vertical-align: middle;
}
-
- 李晓健
- 2015-11-17 17:29:20
给出你的代码，别人才能看出问题
CSS深入理解之vertical-align
39337 学习 · 57 问题
相似问题