Css 将文本置于中心

Question

我在图像和文本之间 div 进行垂直分割。我想将 <p> 元素垂直居中（响应式解决方案）。我不想使用 table。使用 flexbox 会导致图像缩小。请记住 div 是相对的。如何让文字垂直居中？

    *{
            overflow-x:hidden !important;
  margin:0;
  padding:0;
  transition:1s;
}
body{
background-color:black;
}
.r > img {
  float: right;
width:50%;
    
}

.r {
  overflow: auto;
  color:white;
  height:auto;
  text-align:center;
  vertical-align:middle;
  
}
p{
    margin:1vmax;
box-sizing:border-box;
font-size:4vmax;
   position: relative;

}
.l > img {
  float: left;
  width:50%;
}

.l {
  overflow: auto;
  color:white;
  height:auto;
  text-align:center;
  vertical-align:middle;
  
}

<body>
    <div class="r">
        <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
        <p style='txt'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
    </div>
    <div class="l">
        <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
        <p style='txt'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
    </div>
</body>

。其他一些解决方案不适用于类似类型

的第二个 div

Answer 1

您可以对 <p> 元素使用 css 中的 transform: translateY(); 函数。这是您应该拥有的代码：

p {
    margin:1vmax;
    box-sizing:border-box;
    font-size:4vmax;
    position: relative;

    transform: translateY(50%);
}

translateY(5O%) 会将您的 <p> 元素精确地移动到您正在谈论的所需位置，只要您不给 <div> 一个特定的高度

Answer 2

在 img 元素周围放置一个包装器 div 后，使用 flexbox 就非常简单了。重要的一点是在 flex children 上设置 flex 属性...

flex: 0 0 50%; /* dont grow, dont shrink, start at 50% width */

...并告诉图像尊重其容器并保持纵横比：

.img-wrap img {
  max-width: 100%;
  height: auto;
}

body {
  color: white;
  background-color: black;
  margin: 0;
}
.r,
.l {
  display: flex;
}
.r {
  flex-direction: row-reverse;
}
.img-wrap,
p {
  flex: 0 0 50%;
}
p {
  display: flex;
  align-items: center;
  text-align: center;
}
.img-wrap img {
  max-width: 100%;
  height: auto;
}

<body>
  <div class="r">
    <div class="img-wrap">
      <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
    </div>
    <p style='txt'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
  </div>
  <div class="l">
    <div class="img-wrap">
      <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
    </div>
    <p style='txt'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
  </div>
</body>

Answer 3

使用 display: inline-block 的简单解决方案。

*{
        overflow-x:hidden !important;
  margin:0;
  padding:0;
  transition:1s;
box-sizing:border-box;
}
body{
background-color:black;
}

img, p{
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}
.r {
  overflow: auto;
  color:white;
  height:auto;
  text-align:center;
  vertical-align:middle;
  direction: rtl;
}
p{
  color: #fff;
margin:1vmax;
font-size:4vmax;
direction: ltr;
text-align: center;
  width: 47%;
}

<body>
    <div class="r">
    <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
    <p class='txt'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
</div>
<div class="l">
    <img src='https://dummyimage.com/600x400/ffffff/00000b.jpg&text=Test+Image' alt>
    <p class='txt'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. et dictum interdum... </p>
</div>
</body>

Css 将文本置于中心

Css position text in center

css

centering