Question

我正在图像和文本之间的div中垂直分割。我想将<p>元素垂直居中（响应解决方案）。我不想用桌子。使用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

一旦在img元素周围放置了一个包装div，就可以使用flexbox非常简单。重要的位是在flex子项上设置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 2

您可以在CSS中使用transform: translateY();函数来访问<p>元素。这是您应该具有的代码：

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

    transform: translateY(50%);
}

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

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位置文本在中心

3 个答案: