如何在具有浮动元素的容器内垂直居中元素，该浮动元素有时会影响容器的最终高度？

Question

欢迎任何关于如何在评论上进行此布局任务的建议..

我不想使用 javascript，我想保持这个布局直到994px宽。

我正在练习 CSS 并且正在实施 web 布局。 布局有以下

1. 带有标题和段落的元素，带有图像的浮动元素，我希望图像具有视口宽度的45% 。

2. 图像还必须将其 position 保持在视口的右上角。

3. 具有段落和标题的元素必须位于图像的左侧

4. 带有标题和段落的元素位于物化框架提供的容器中。

图像和带有段落标题的元素在一个容器内，具体来说是一个header元素。

我有一些麻烦，要将图像向右移动，我正在使用float属性，并且header有display: flow-root来包含浮动元素。

由于浮动图像而增加了高度，然后我尝试使用以下代码将带有段落和标题的元素垂直居中。

position: relative
top: 50%
transform: translateY(-50%)

它不起作用， top: 50%不起作用，即使浮动图像向header增加更多高度，似乎高度也不会增加。

我尝试过的另一件事是将带有标题段落的元素的高度设置为 100%（再次期望标题的高度可以包含在该百分比计算中）然后display: flex; align-items: center display: flex; align-items: center我添加了一个包装器元素以使其成为flex-item但也没有工作。

我该怎么做才能使带有段落和标题的元素垂直居中？

我需要图像始终具有视口宽度的 45%，我不想要像素大小。

完整的代码是这样的：

 *{ margin: 0; }.header{ display: flow-root; } /* Image floting to the right, because his parent element have float: right (.float class) */ img{ width: 100%; }.float{ float: right; width: 45vw; z-index: 1; }.desc{ padding-top: 12%; padding-bottom: 12%; }.desc > div{ width: 50%; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/> <:--Header with display: flow-root to contain the floating element --.--> <header class="header"> <.--Image floating to the right---.--> <div class="float"> <img src="http.//demo.themeies.com/leospa/images/spa,png"> </div> <,--The contents of this container must to be centered verticcally---,--> <div class="container"> <div class="desc"> <div> <h1 class="header__headingPage"> Beauty and success starts here. It's Overwhelming this layout </h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia saepe omnis consectetur. Perferendis in, dolorem ex rerum quo reprehenderit sit, eveniet ducimus illum distinctio optio cum magni voluptate, enim eum. </p> </div> </div> </div> </header>

Answer 1

在您的.container元素定义了高度之前，您的内容不能垂直居中。

我假设您希望.container扩展并垂直适合header ，因此我们可以简单地将其高度设置为 100%； 请注意，需要定义header的高度。

同样，您可以将 header 的高度设置为 100%，它会查看其父级以获取其高度。 出于练习的目的，我在下面的小提琴中将html 、 body 、 header和.container的高度设置为 100%。 在此示例中，您应用的 CSS 现在可以工作：

.desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

jsFiddle

（在我的示例中，我减小了 h1 的字体大小，因此可以感知居中效果）。

显然，在树的每个父元素上设置 100% 的高度可能对您来说不是一个可行的解决方案，但至少它应该可以帮助您理解为什么您的垂直居中尝试没有奏效。