vertical-align属性

个回答

李晓健: 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图片尺寸最好宽高一样

0
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>

0
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;
}

0
李晓健

2015-11-17 17:29:20

给出你的代码，别人才能看出问题

0