響應式地在兩行文字旁邊的中央圖像

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。