[英]image vertical align bootstrap with text
我想知道将图像放置在页面中央,然后在图像旁边垂直对齐两行文本的正确方法。 我应该将图像和文本放在一个bootstrap中,还是应该将图像放在一个column中,并将文本放在单独的column中? 我知道有几种方法可以做到这一点,我只想知道正确的方法。
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
这是正确的方法
div{ display: inline-block; }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-8"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" /> </div> <div class="col-xs-4"> <p style="font-size:48px;">Test</p> <p style="font-size:24px;">Test second line. </p> </div> </div>
这是小提琴
注意 :导入外部资源时,请使用https://
;如果要使用块文本,请使用p
标签而不是span
。
用这个
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.