Question

我在谷歌搜索但无法找到任何我在stackoverflow上发布的内容。如果已经问过，请在评论中给我链接，抱歉再次询问。我给显示表格单元格属性的div赋予宽度，但它不起作用。

我的代码是

<header class="header layers">
        <div class="wrap">
            <h1 id="title"><?php echo $blogtitle;?></h1>
        </div>
</header>

而css是

.layers {
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  overflow: hidden;
  box-sizing: border-box;
  table-layout: fixed;
}

.wrap {
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  width: 1040px;
}

.header {
  height: 80px;
  width: 100%;
}

#title {
  font-size: 30px;
  color: black;
  font-family: 'Roboto', sans-serif;
}

我的脑袋很痛苦，为什么它不工作我多次使用它没有问题。但我不知道为什么这次不工作。当我在inspect元素中看到wrap类的宽度时，它将它设置为100％而没有错误。请帮忙。欣赏任何anwser和评论。抱歉我的英语不好。

小提琴链接是https://jsfiddle.net/yashag/zhsxLhzj/

Answer 1

根据评论中的要求，以下是使用display: flex（flexbox）垂直对齐文字的示例（正如您尝试使用display: table-cell时那样）。您还可以轻松指定flexbox的width和height，就像普通的块元素一样。

正如您所看到的，display:flex元素正确地垂直居中于文本中，和可以正确地设置为1040px宽度。

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
div#container {
  display: flex;
  align-items: center;
  height: 100%;
  width: 1040px;
}
div#centered {
  height: 20px;
  width: 100%;
  text-align: center;
}

<div id="container">
  <div id="centered">Vertically-centered using <code>display: flex</code>.</div>
</div>

为table-cell设置px宽度

1 个答案: