[英]vertical align multiple lines of text beside a centered image responsive
我正在使用引导程序,我需要有一个居中的图像,然后在它旁边有多行文本。 当我减小屏幕宽度时,图像必须环绕并堆叠在文本顶部。 我似乎无法正确地做到这一点。
https://jsfiddle.net/dzz2fmcp/
<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>
尝试一下:
<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>
<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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.