始终在图像旁边的 div 中心对齐文本？

Joelad 发表于 Dev

乔拉德

https://jsfiddle.net/joel081112/6yud4bvo/3/

我有这个小提琴，它显示了我目前的情况。我无法让我的文本始终在图像旁边的 div 中间对齐。此刻，文本与 div 的顶部保持水平。

我试过了vertical-aligned，top: 50%但我一定错过了一些简单的东西

.homeInfo2 {
    padding: 20px;
    height: auto;
    text-align: center;
    float: left;
}


.homeIm1 {
    height: auto;
    float: right;
}

.item {
    display: flex;
    width: 100%;
}

.item:nth-child(odd) {
    flex-direction: row-reverse;
}

.item > div {
    width: 50%;
}

<article class="item">
    <div class="homeInfo2">
      some text 1
    </div>
    <div class="homeIm2">
      <img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">

    </div>
  </article>

该代码是我使用的关键

或德罗里

由于您的.item元素是align-items: center在项目上设置的 flexbox ：

.item {
  display: flex;
  width: 100%;
  align-items: center;
}

.item:nth-child(odd) {
  flex-direction: row-reverse;
}

.item>div {
  width: 50%;
}

.homeIm1 {
  height: auto;
}

.homeInfo2 {
  padding: 20px;
  text-align: center;
}

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

@media (max-width: 500px) {
  .item,
  .item:nth-child(odd) {
    flex-direction: column;
  }
  .item>div {
    width: 100%;
  }
}

<div class="container">

  <article class="item">
    <div class="homeInfo2">
      some text 1
    </div>
    <div class="homeIm2">
      <img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">

    </div>
  </article>
  <hr>

  <article class="item">
    <div class="text">
      some text
    </div>
    <div class="image">
      some image
    </div>
  </article>
  <hr>
  <article class="item">
    <div class="text">
      some text 2
    </div>
    <div class="image">
      some image 2
    </div>
  </article>
  <hr>
  <article class="item">
    <div class="homeInfo2">
      some 1 text blah
    </div>
    <div class="homeIm2">
      <img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">

    </div>
  </article>
  <hr>
  <article class="item">
    <div class="text">
      some text
    </div>
    <div class="image">
      some image
    </div>
  </article>
  <hr>
  <article class="item">
    <div class="text">
      some text
    </div>
    <div class="image">
      some image
    </div>
  </article>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。