css - 如何使行的宽度达到100％？

我在对齐某些行时遇到一些问题。我正在显示一个占视口高度100％的区域。因此，当您在屏幕上查看此部分时，您只会看到此部分。

在本节中，我有一个标题和副标题。标题应显示在该部分的顶部附近，但字幕应垂直显示在该部分的中间。因此，如果您的屏幕高度为1000像素（这将使该部分的高度为1000像素），则字幕应显示在500像素左右。我的部分当前如下所示

<section class="block-hero">
  <div class="container container-table">
    <div class="row vertical-top-row">
      <div class="col-md-12 centerText">
        <h1 class="heroTitle">Some Title</h1>
      </div>
    </div>
    <div class="row vertical-center-row">
      <div class="col-md-12 centerText">
        <h2 id="subTitle">Some<br>Text</h2>
      </div>
    </div>
  </div>
</section>

CSS就像这样

html, body {
  height:100%;
}
.site-wrapper {
    overflow: hidden;
    position: relative;
    top: 0;
    width: 100%;
}

.block-hero {
  height:100%;
  width: 100%;
  z-index: 300;
  overflow:hidden;
}

.container-table {
    display: table;
    width:100%;
    height:100%;
}
.vertical-top-row {
    display: table-cell;
    vertical-align: top;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
    height:100%;
}

.centerText {
    text-align: center;
}

#subTitle {
    width: 100%;
}

我有一个fiddle现在遇到的一个问题是我目前的状况，我的行不再是100％的宽度。这意味着字幕不会精确地居中。我认为我可以进行垂直对齐，但是现在我需要将文本居中。

我该如何去做，或者我需要对当前拥有的东西进行更改？

谢谢

最佳答案

在玩弄了几句之后，让您失望的是似乎您将display: table与Bootstrap的行和列结合使用。 Bootstrap并非以这种方式与表一起使用，而是被替换为表，因此它在争夺对表的控制权。

最主要的是，看起来您的行是彼此相邻的，而不是彼此相邻的，这是因为您的行上有display: table-cell且周围没有任何display: table-row元素，因此浏览器似乎在起作用就像它们周围都有一个table-row元素一样，因此迫使它们彼此相邻放置，因为它们现在是同一行中的两个单元格。

最好的选择IMO是选择一种网格方法，或者选择另一种Bootstrap或表单元格。就个人而言，我更喜欢Bootstrap，但这就是您的电话。如果要使用表路线，请删除所有.row和.col-sm-12类，将以前的.row元素设置为display: table-row，然后将以前的.col-sm-12元素设置为display: table-cell。

如果要走引导程序路线（我的偏爱），则可以选择。您实际上并没有指定该部分中除了这两个标题之外是否还有其他内容，但是，如果没有，垂直对齐字幕的一种简单方法是给其.row类似margin-top: 40%的内容从上面的行向下移动一个相对距离。试一下百分比，看看自己喜欢什么。这是一个基于原始jsfiddle的示例：https://jsfiddle.net/ck3epwm5/1/

顺便说一句，如果您的首选行为实际上是将剖面设置为视口高度的100％，则可能需要将height: 100%替换为height: 100vh。这是一个新的（ish）CSS3长度单位，字面意思是“视口高度的百分比”（从技术上讲，1vh定义为“视口高度的1/100”； MDN reference），因此直接基于视口本身，而%值基于具有指定高度的最接近的祖先，有时可能会导致意外的行为。

关于css - 如何使行的宽度达到100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36598288/