中央图像响应两行文字 [英] center image next to two lines of text responsively

问题描述

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

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>这是一个标题。< / h2> 
< h5 class =vid-open>一些文字一些文字一些文字< span class =icon-right-left-01-011>< / span>< / h5> 
< / div> 
< / div> 
< / div> 
< / section> 
  

SEE DEMO

解决方案

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

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

 < section class =蛋的力量> < 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>这是一个蛋。< / h2> < h5 class =vid-open>鸡蛋非常有营养< span class =icon-right-left-01-011>< / span>< / h5> < / DIV> < / DIV> < / DIV> < / div>< / section>  

b
$ b

更新了Codepen

I am trying to display an image next to two lines of text, which are centered. I have attached an example, and you will see from it that the image is to the left of the text, whereas I am trying to center the image to be on the left side of the text, and have a perfectly centered image/text.

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

解决方案

Simply wrap the text in a div and display it 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

这篇关于中央图像响应两行文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！