Question

我使用bootstrap我需要有一个居中的图像，然后旁边有多行文字。当我减小屏幕宽度时，图像必须包裹并堆叠在文本的顶部。我似乎无法做到这一点。

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-5">
      <img class="head" src="http://placehold.it/150x150&text=Hello world" >
        </div>
        <div class="col-sm-5">
          <p class="text-left name" style="margin-bottom:0px;">Name</p>
          <p class="text-left title" style="margin-bottom:0px;">Job</p>
          <p class="text-left description" style="margin-bottom:0px;">12 years at  I.T.</p>
            <p class="text-left" style="margin-bottom:0px;"> Instructor</p>
            <p class="text-left" style="margin-bottom:0px;">EFR / AED Rescue Instructor</p>
            <p class="text-left">Lorem Ipsum has been the industry's standard dummy text ever sinc </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个：

<div class="row">
    <div class="col-sm-12">
        <div class="col-sm-4 pull-left">//changed
            <img class="head" src="http://placehold.it/150x150&text=Hello world" >
        </div>
        <div class="col-sm-4">//changed
            <p class="text-left name" style="margin-bottom:0px;">Name</p>
            <p class="text-left title" style="margin-bottom:0px;">Job</p>
            <p class="text-left description" style="margin-bottom:0px;">12 years at  I.T.</p>
            <p class="text-left" style="margin-bottom:0px;"> Instructor</p>
            <p class="text-left" style="margin-bottom:0px;">EFR / AED Rescue Instructor</p>
            <p class="text-left">Lorem Ipsum has been the industry's standard dummy text ever sinc </p>
        </div>
    </div>
</div>

Answer 2

<div class="row people">
  <div class="col-lg-2 center-image">
    <img class="head" src="images/someone.png" >
  </div>
  <div class="col-lg-4 center-image" style="width:300px">
    <p class="name" align="left" style="margin-bottom:0px;">Person</p>
    <p class=" title" align="left" style="margin-bottom:0px;">job</p>
    <p class=" description"align="left" style="margin-bottom:0px;">12 years </p>
    <p class=""align="left" style="margin-bottom:0px;">surfer guy</p>
    <p class=""align="left" style="margin-bottom:0px;">Instructor</p>
    <p class=""align="left">some text</p>
  </div>
</div>

CSS

.center-image{
  display: inline-block;
  vertical-align: middle;
  float:none;
}

垂直对齐居中图像旁边的多行文本，以响应

2 个答案: