Question

我在调整某些行时遇到了一些问题。我正在显示一个占据视口高度100％的部分。因此，当您在屏幕上查看此部分时，您将只看到此部分。

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

<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％宽度。这意味着字幕不会在中间精确居中。我想我的垂直对齐工作，但现在我需要将文本置于中间位置。

我怎么能这样做或者我是否需要改变我现在拥有的东西？

由于

Answer 1

在玩了一下之后，让你失望的事情似乎是你将display: table与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。

如果您想要使用Bootstrap路线（我的偏好），您可以选择。除了这一部分中的这两个标题之外，你没有真正说明你是否还有其他任何内容，但如果没有，一个简单的方法来垂直对齐你的副标题就是给它.row之类的东西。 margin-top: 40%将它向下推到距离它上方一行的相对距离。玩弄百分比，看看你喜欢什么。以下是基于原始jsfiddle的示例：https://jsfiddle.net/ck3epwm5/1/

顺便说一下，如果您的首选行为确实是该部分是 viewport 高度的100％，那么您可能希望将height: 100%替换为height: 100vh。这是一个新的（ish）CSS3长度单位，字面意思是视口高度的百分比＆＃34; （从技术上讲，1vh被定义为＆＃34;视口高度的1/100;＆＃34 ;; MDN reference）因此直接基于视口本身，而%值基于具有指定高度的最近祖先，有时会导致意外行为。

如何让我的行100％宽？

1 个答案: