Question

我试图将两个段落对齐在图像的左侧，但我似乎无法弄明白。我也试图使文本的宽度与图像的宽度相同。我需要在那里保持div align =“center”，以便引导行位于页面的中心。请帮忙！

以下是我的网页设计中关于如何对齐它的图片。 http://i.imgur.com/kIbyBUS.png

这是html代码。 https://jsfiddle.net/kvu7y8ym/

    <div align="center">
      <div id="preview" class="col-lg-4 col-md-6 col-sm-12">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem 
    at cursus pulvinar. Ut luct diam.</p>
      </div>
    </div>

Answer 1

最简单的方法是使用2个包装器，inline-block和table-caption。

table-caption会将文字保留在图片的边缘，inline-block将以text-align: center元素上设置的#preview为中心。

#preview {
  text-align: center;
}

.inline-block {
  display: inline-block;
}

.tbl-caption {
  display: table-caption;
  text-align: left;
}

<div>
  <div id="preview" class="col-lg-4 col-md-6 col-sm-12">
    <div class="inline-block">
      <div class="tbl-caption">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem at cursus pulvinar. Ut luct diam.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

<div class="container">
   <div class="row">
      <div id="preview" class="col-lg-offset-4 col-md-offset-3 col-lg-4 col-md-6 col-sm-12">
        <img id="img" src="http://i.imgur.com/HHGHTsu.png">
        <p><b>EXAMPLE WEB DESIGN</b></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum lobortis diam ut ipsum egestas scelerisque. Nam semper lorem 
    at cursus pulvinar. Ut luct diam.</p>
     </div>
   </div>
</div>

如果您正在使用Bootstrap（我觉得您使用的是col-lg-4等），我会这样做。

当您使用这些类时，他们希望在container内，然后在row内使用不同的偏移量来居中内容，请参阅上面的示例。

对齐图像左侧下方的文字

2 个答案: