如何對齊圖像的文本css

Question

我想對齊文本以圖像，文本正在打破，文本的其餘部分正在圖像下。

這是我的嘗試：

Demo

HTML：

<section> 
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div> 
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div> 
</section> 

CSS：

div.left{ 
    vertical-align: middle; 
    display: inline-block; 
} 
div.right{ 
    vertical-align: middle; 
    display: inline; 
} 

Answer 1

如果你需要使用DIV。

div.left { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    padding-right: 10px; 
 
} 
 
div.right { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<section> 
 
    <div class="left"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt=""> 
 
    </div> 
 
    <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo </span> 
 
    </div> 
 
</section>

Answer 2

請嘗試將此代碼

div.left{ 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    float:left; 
 
} 
 
div.right{ 
 
    vertical-align: middle; 
 
    display: inline; 
 
}

<section> 
 
    <div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div> 
 
    <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div> 
 
</section>

Answer 3

的一個好方法是將其在table安排。我認爲它更整潔，更容易組織。

div.left { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
div.right { 
 
    vertical-align: middle; 
 
    display: inline; 
 
}

<section> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     <div class="left"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt=""> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</section>

見Fiddle

Answer 4

使用display:flex節。如果你想讓文本中心成爲​​。

section { 
 
    align-items: center; 
 
    display: flex; 
 
}

<section> 
 
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div> 
 
<div class="right"><span>Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo </span></div> 
 
</section>

Answer 5

div.left{ 
 
    float: left; 
 
}

<section> 
 
<div class="left"><img src="https://s-media-cache-ak0.pinimg.com/236x/44/9f/02/449f02a1a0328ed5f311112b83407fdf.jpg" alt="" ></div> 
 
Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo Demo Demo demo 
 
</section>

fiddle here

只是用浮法離開就能解決問題

div.left{ 
    float: left; 
}