中心与表格单元格对齐

时间:2013-10-04 14:39:30

标签: html css

我正在尝试使用table-cell方式将div垂直和水平居中。

当我使用以下代码时它可以工作:

div {
    display: table;
}
.logo {
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

但我宁愿将.logo包裹在另一个名为.center的div中,就像这里JSFiddle一样,但出于某种原因,尽管它在JSFiddle中有效,但它对我不起作用我的网站。

2 个答案:

答案 0 :(得分:42)

这是一个很好的起点。

HTML:

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS:

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

请参阅演示:http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table.centre-align(表格单元格)建立宽度和高度上下文。

您可以根据需要应用text-alignvertical-align来更改.centre-align

请注意.content如果要使用text-align属性水平居中,则需要使用display: inline-block

答案 1 :(得分:24)

使用flexbox会更容易。使用flexbox将不允许您指定内容的高度,并可以自动调整其包含的高度。

DEMO

这是演示的要点

.container{

  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;

}

HTML

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>

enter image description here