时间戳

首页 > 解决方案 > 如何在环绕浮动元素的视口中垂直居中文本

css - 如何在环绕浮动元素的视口中垂直居中文本

问题描述

我在两个浮动元素之间有文本，并且文本围绕着元素的形状在外面。我希望此文本在页面上垂直居中，但我尝试过的所有垂直居中选项都会导致换行中断。这是它现在的样子：

文字之间的文字

我目前正在使用padding-top: 40vh将文本大致居中，但这会在较小的视口中中断。我已经尝试过进行padding-top: 50vh转换translate(-50%)，但这不起作用。我也尝试过表格、弹性和网格布局，但没有成功。此外，我尝试了文本的绝对定位，显然，由于文本从流中删除，因此也会破坏换行。使用 JavaScript 动态设置padding-top是一种选择，但我更喜欢 CSS 解决方案。

最小的例子

html, body {
  padding: 0;
  margin: 0;
}

#container {
  height: 100vh;
  width: 100vw;
  
  text-align: justify;
}

#left {
  float: left;
  width: 30vw;
  height: 100vh;
  
  background: red;
  opacity: 0.1;
  
  shape-outside: polygon(0 0, 30vw 0, 20vw 20vh, 20vw 80vh, 30vw 100vh, 0 100vh);
}

#right {
  float: right;
  width: 30vw;
  height: 100vh;
  
  background: green;
  opacity: 0.1;
  
  shape-outside: polygon(30vw 0, 0vw 0, 10vw 20vh, 10vw 80vh, 0vw 100vh, 30vw 100vh, 0 100vh);
}

#container p {
  margin: 0;
}
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquam mattis sapien. Duis ut arcu sed nibh pretium ornare. Donec sed lacus viverra, pellentesque diam id, fringilla turpis. Donec egestas mauris libero, sit amet hendrerit nibh lobortis vel. Mauris sagittis elit libero, quis finibus arcu venenatis non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>

标签： csscentering

解决方案

#text {
    padding-top: 0; // remove padding including the inline padding
    position: relative;
    top: 50%;
    transform: translatey(-50%);
    left: -6%;
}

推荐阅读