Question

我正在建立在How to center horizontal table-cell最初提出的问题上稍作修改。

基本上，DIV需要像现在一样居中，但是，我还需要垂直对齐中间单元格中的所有内容。

更改vertical-align: middle;的{{1}}没有任何意义。如果我将.column的{{1}}更改为display: inline-block;，它会将内容对齐到中间，但是.column DIV不再居中，宽度全部被破坏（目前全部都是均匀设定为25％）。在父级上设置display: table-cell或text-align不会做任何事情。

我已经跑了好几天了。感谢您的帮助。

＆＃13;

.column

＆＃13;

margin:auto;

＆＃13;

Answer 1

你可以像下面这样做，它使用CSS3 Transforms，请参阅browser support详细信息。并注意内联块上的white spaces事。

<强> JsFiddle demo

.container {
    text-align: center;
    margin: 0 auto;
}
.column {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.column > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }

<div class="container">
    <div class="column" id="a"><div>Contents A</div></div>
    <div class="column" id="b"><div>Contents B</div></div>
    <div class="column" id="c"><div>Contents C</div></div>
</div>

Answer 2

将.column的{{1}}设置为元素的line-height是第一步;所以：height垂直对齐内容然后，只需编辑您在line-height:150px上设置的text-align:left样式声明，以.column完成垂直对齐。在这种情况下。
这是一个小提琴：
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/

如何将水平表格单元格和内容放在中间

2 个答案: