如何将水平表格单元格和内容居中居中

F L 发表于 Dev

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

改变vertical-align: middle;了.column什么都不做。如果我改变display: inline-block;了.column到display: table-cell，它会对齐，中间的内容，但随后.column的DIV不再是中心和宽度都碎（目前全部均匀地设定为25％）。margin:auto;在父级上设置或文本对齐不会执行任何操作。

我已经在这上面跑了好几天了。感谢您的帮助。

/* Setting the container to be a table with maximum width and height */
#container {
	display: table;
	height: 100%;
	width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */

.section {
	display: table-row;
	min-height: 1px;
}

/* We need one extra container, setting it to full width */
.columns-container {
	display: table-cell;
	height: 100%;
	width:100%;
	text-align: center;
}
/* Creating columns */
.column {
    display: inline-block; 
	vertical-align: middle;
	min-height: 150px;
	width: 25%;
	text-align: left;
}
#a {
	background-color: pink;
}
#b {
	background-color: lightgreen;
}
#c {
	background-color: lightblue;
}

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

贴纸

您可以按照以下方式进行操作，它使用CSS3转换，请参阅浏览器支持详细信息。并且要注意内联块上的空格。

JsFiddle演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。