圖像和段落的垂直和水平中心

Question

如何將圖像與段落的命題對齊。請參閱下面的URL中的示例代碼。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
 
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive" /> 
 
    </div> 
 
    <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
</div>

JSfiddle Demo

Answer 1

試試這個：

<div class="container"> 
    <div class="col-md-12"> 
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive pull-left img-thumbnail" />  
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
    </div> 
</div> 

或者：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive pull-left img-thumbnail" /></div> 
     <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12"> 
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting 
industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
     industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and 
scrambled it to make a type specimen book. It has survived not 
     </div> 
    </div> 
</div> 

Answer 2

<div class="container"> 
<table> 
<tr> 
<td> 
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> 
    <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive" /> 
      </div> 
</td> 
<td> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 

       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

</div> 
</td> 
</tr> 
</table> 
</div> 

這應該工作，只需放在表中，請注意，您可能會調整自舉標記（col-lg-12 col-md-12 col-sm-12 col-xs-12）

Answer 3

真的不確定你的意思，但讓我們試着清理一下代碼，它可能是你在找什麼：

• 容器應havea row類
• 的屬性值應該是從小到大
• 您沒有12的總和爲col-lg和col-md？
• 對於col-xs，我知道你希望圖像處於最佳狀態。
• 我猜想當屏幕大於750像素時，您需要左側的圖像和右側的文本。
• 此外，沒有必要添加更大的值，它會自動作爲較小的值，因此如果它與col-md一樣，則不需要col-lg。

因此，這裏是乾淨的代碼，告訴我，如果你想要的東西：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-6 col-md-4"> 
 
      <img src="http://dummyimage.com/300x200/000/fff" class="img-reponsive" /> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6 col-md-8"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
     </div> 
 
    </div>