响应式地在两行文字旁边的中央图像

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：

.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

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中的图像是块-level元素，这意味着它将展开为其父元素的全部宽度。

如果你把图像了股利，并包含文本的DIV有：

display:inline-block; 

该专区将缩小到只有一样宽，它的内容。

这是你更新的代码：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。