                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之vertical-align

vertical-align属性

文字会相对于图片垂直居中，但图片并没有垂直居中。不知道怎么回事

jiameil

2015-11-17

源自：CSS深入理解之vertical-align 2-1

关注问题我要回答

1848

操作

收起

5 回答

李晓健回答被采纳 +3 积分
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 加一个line-height就好了

0 回复有任何疑惑可以回复我~

收起回答

jiameil 提问者

非常感谢！

2015-11-17 回复有任何疑惑可以回复我~

慕少7532173

请问给div加行高是啥原理呢

2016-10-23 回复有任何疑惑可以回复我~

qq_ggJKING_LWJ_0

这样只有一行文字就没问题，多行文字怎么处理？

2016-11-09 回复有任何疑惑可以回复我~

查看1条回复

jeSus_sCroSs
2017-08-18

我个人的一些看法：pc端float左右即可，很容易达到，vertical更适合移动端，所以不建议把li的height写死，可以写一个max-height限高；

但是问题就是 img图片尺寸最好宽高一样

0 回复有任何疑惑可以回复我~

收起回答

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

<li>

<span>

<a href="#">three</a>

</span>

</li>

</ul>

0 回复有任何疑惑可以回复我~

收起回答

jiameil 提问者
2015-11-17

<span>文字在脑子里了</span>

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

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

0 回复有任何疑惑可以回复我~

收起回答

jiameil 提问者

<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 回复有任何疑惑可以回复我~

0/150

提交

取消

CSS深入理解之vertical-align

参与学习 39340 人
解答问题 57 个

深入理解vertical-align的属性值，分享开发中应用经验

进入课程

本课相似问答

1 回答vertical-align

1 回答vertical-align 百分比值得ie6、ie7

1 回答vertical-align不起作用是咋回事

1 回答vertical-align:10px和视频中讲的不一致

2 回答为什么bottom设置vertical-align不起作用呢

搜索更多本课相关问答

vertical-align属性

我要回答关注问题

热搜

最近搜索清空

vertical-align属性

5 回答

本课相似问答

vertical-align属性