问一个css垂直居中的问题

发布于
2015-07-16

如图，第一项和第二项要怎么垂直居中，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>

css 前端

阅读 4.1k

6 个回答

得票最新

lanse_yan

1.1k358

发布于
2015-07-16

✓ 已被采纳

首先要先搞清楚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值让其居中，这种做法比较简单。
以上都是提供思路，具体问题还需具体对待，根据需求选择。

cool_zjy

直接用 line-height

我记得那个是为表格准备的对齐方式。(display:table,display:table-cell之类的)
如果显示方式不是表格的话，对于inline类型的可以用line-height……至于其他的，好像很麻烦，我不怎么清楚。

Eric_Huang

25137

发布于
2015-07-16

用display:table-cell;vertical-align:middle;试试，vertical-align:middle;是针对表格的所以先要display:table-cell;
可以看看这里http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

请参考下边示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
        background: #dedede;
    }
    .div{
        width:300px;
        height:100px;
        background: #f00;
        position: absolute;
        left:50%;
        margin-left:-150px;
        top:50%;
        margin-top:-50px;
    }
    </style>
</head>
<body>
    <div class="demo">
        <div class="div"></div>
    </div>
</body>
</html>

qq55859000

发布于
2015-07-16

更新于
2015-07-16

<div style="margin: 0 auto"></div>

撰写回答