Question

我试图在两行文本旁边显示图像，这两行文本居中。我附上了一个例子，您将从中看到图像位于文本的左侧，而我试图将图像居中放置在文本的左侧，并且具有完美居中的图像/文本。

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

Answer 1

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

＆＃13;

.center-class {
  text-align: center;
}

.righty > * {
  display: inline-block;
  vertical-align: middle;
}

.righty img {
  max-width: 100px;
}

＆＃13;

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

＆＃13;

Updated Codepen

Answer 2

嗯，这将使整个区块居中：

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

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

Answer 3

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

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

  display:inline-block;

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

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

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

中心图像旁边的两行文字响应

4 个答案: