Question

我正在尝试创建一个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>

Answer 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>

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

1 个答案: