问一个css垂直居中的问题
如图，第一项和第二项要怎么垂直居中，vertical-align没效果，给第一二项设置行高？
<div class="col col-33">
总计
</div>
<div class="col col-33">0</div>
<div class="col col-33">
<div class="bg-default">0.00</div>
</div>
展开
收起
1
条回答
写回答
写回答
-
首先要先搞清楚vertical-align是用来做什么，它是定义行内元素的基线相对于该元素所在行的基线的垂直对齐。看你这布局应该是div.col全部float了吧，这都不能称之为一行了，彼此之间联系除了位置关系基本上没啥联系。所以使用vertical-align没用。有以下几种方法：
1.使用line-height,但是如果全两个div.col里面的文字超过一行，问题就来了。
2.div.col使用display:inline-block，不要用浮动，但需要清除之间默认的间隔。
3.div.col使用display:table-cell;vertical-align:middle。
4.如果你不需要支持的低版本的浏览器，则可以考虑弹性布局display: flex;align-items：center，比较好用。
5.设置div.col的高度，然后使用padding值让其居中，这种做法比较简单。
以上都是提供思路，具体问题还需具体对待，根据需求选择。2019-07-17 19:18:33赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
