响应地在两行文本旁边居中图像答案

【问题标题】：center image next to two lines of text responsively响应地在两行文本旁边居中图像
【发布时间】：2016-03-10 03:06:51
【问题描述】：

我正在尝试在居中的两行文本旁边显示图像。我附上了一个例子，你会从中看到图像在文本的左侧，而我试图将图像居中放在文本的左侧，并有一个完全居中的图像/文本。

CSS：

.center-class{
  text-align:center;
}
.righty img{
  max-width: 100px;
  float:left;
}
.vid-open{
}

HMTL：

<section class="">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg" >
        <h2>This is a header.</h2>
        <h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
      </div>
    </div>
  </div>
</section>

SEE DEMO

【问题讨论】：

您希望图像在页面上居中并让文本在其右侧流动？

标签： html css

【解决方案1】：

只需将文本包装在一个 div 中并显示它inline-block：

.center-class {
  text-align: center;
}

.righty > * {
  display: inline-block;
  vertical-align: middle;
}

.righty img {
  max-width: 100px;
}

<section class="power-of-egg">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg">
        <div class="con">
          <h2>This is an egg.</h2>
          <h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
        </div>
      </div>
    </div>
  </div>
</section>

Updated Codepen

【讨论】：

【解决方案2】：

嗯，这将使整个块居中：

.center-class{
  text-align:center;
}
.righty img{
  max-width: 100px;
  float:left;
}
.vid-open{
}

.righty {
  width: 300px;
  margin: 0 auto;
}

【讨论】：

【解决方案3】：

问题是您将图像放在 div 中，而 div 是块级元素，这意味着它将扩展为其父元素的整个宽度。

如果将图像从 div 中取出，并使包含文本的 div 具有：

  display:inline-block;

该 div 将缩小到仅与其内容一样宽。

这是您的更新代码：http://codepen.io/anon/pen/LNNJRQ

【讨论】：

【解决方案4】：

要将element 水平居中，您可以使用display: block; 和margin: auto;。可能有更好的方法，但这是css，我曾经将图像放在中间，文本放在右边：

.righty > .con {
  position: absolute;
  top:0;
  left: 55%;
}

.righty img {
  display: block;
  vertical-align: middle;
  margin: auto;
  max-width: 100px;
}

注意：.con 类的位置会因屏幕大小而异。

这是更新后的codepen。

【讨论】：