vertical-align屬性
文字會(huì)相對(duì)于圖片垂直居中，但圖片并沒有垂直居中。不知道怎么回事
jiameil
2015-11-17
5 回答
舉報(bào)
0/150
提交
取消
2015-11-17
.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 加一個(gè)line-height就好了?
2017-08-18
我個(gè)人的一些看法：pc端float左右即可，很容易達(dá)到，vertical更適合移動(dòng)端，所以不建議把li的height寫死，可以寫一個(gè)max-height限高；
但是問題就是 img圖片尺寸最好寬高一樣
2017-08-18
.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>
2015-11-17
<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
給出你的代碼，別人才能看出問題