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

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>