div内图像的边距和垂直对齐答案

【问题标题】：Margins and vertical alignment of image inside divdiv内图像的边距和垂直对齐
【发布时间】：2019-07-14 14:02:41
【问题描述】：

我正在尝试创建一个 div，其中的内容包含左侧的图像和右侧的文本。我能够正确设置文本的边距和左对齐，但是，在响应式堆叠视图中查看时，图像未垂直对齐并且边距在右侧脱落。

body {
  position: relative;
  height: 100vh;
  margin: 40px;
  background-color: #e6e6e6e6;
  color: #444;
  font: .9em Arial, sans-serif;
}

.wrapper {
  box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.wrapper div {
  min-height: 150px;
  overflow: hidden;
}

#one {
  background-color: white;
  float: left;
  margin: 10px 20px 10px 10px;
  width: 200px;
  white-space: nowrap;
  text-align: center;
  line-height: 100px;
}

#one img {
  vertical-align: middle;
  max-height: 25px;
  max-width: 160px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#two {
  background-color: white;
  overflow: hidden;
  margin: 10px;
  min-height: 100px;
}

@media screen and (max-width: 910px) {
  #one {
    float: none;
    margin-right: 0;
    width: auto;
    border: 0;
  }
}

<body>
  <div class="wrapper">
    <div id="one">
      <span class="helper"></span>
      <img src="http://jsfiddle.net/img/logo.png" />
    </div>
    <div id="two">
      <h2>LOREM IPSUM</h2>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
        ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
      <br>
      <p>
        <p>
          https://google.com/
        </p>
    </div>
  </div>

  <div class="wrapper">
    <div id="one">
      <span class="helper"></span>
      <img src="http://jsfiddle.net/img/logo.png" />
    </div>
    <div id="two">
      <h2>LOREM IPSUM</h2>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
        ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
      <br>
      <p>
        <p>
          https://google.com/
        </p>
    </div>
  </div>

</body>

【问题讨论】：

标签： html css

【解决方案1】：

我加了

height:100%;
display:flex;
align-items:center;
justify-content:center;

致#one

body {
  position: relative;
  height: 100vh;
  margin: 40px;
  background-color: #e6e6e6e6;
  color: #444;
  font: .9em Arial, sans-serif;
}

.wrapper {
  box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.wrapper div {
  min-height: 150px;
  overflow: hidden;
}

#one {
  background-color: white;
  float: left;
  margin: 10px 20px 10px 10px;
  width: 200px;
  white-space: nowrap;
  text-align: center;
  line-height: 100px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#one img {
  vertical-align: middle;
  max-height: 25px;
  max-width: 160px;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

#two {
  background-color: white;
  overflow: hidden;
  margin: 10px;
  min-height: 100px;
}

@media screen and (max-width: 910px) {
  #one {
    float: none;
    margin-right: 0;
    width: auto;
    border: 0;
  }
}

<body>
  <div class="wrapper">
    <div id="one">
      <span class="helper"></span>
      <img src="http://jsfiddle.net/img/logo.png" />
    </div>
    <div id="two">
      <h2>LOREM IPSUM</h2>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
        ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
      <br>
      <p>
        <p>
          https://google.com/
        </p>
    </div>
  </div>

  <div class="wrapper">
    <div id="one">
      <span class="helper"></span>
      <img src="http://jsfiddle.net/img/logo.png" />
    </div>
    <div id="two">
      <h2>LOREM IPSUM</h2>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
        ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
      <br>
      <p>
        <p>
          https://google.com/
        </p>
    </div>
  </div>

</body>

【讨论】：

谢谢@Dogukan Cavus！这解决了垂直对齐问题，但是，#one 的边距仍然与 #two 不匹配？