[英]Align Text In Middle next to an Image
I have an image inside a div with a class of col-md-6 and I'm trying to position text next to the image right in the middle. 我在div类别中有一个图像,其类为col-md-6,我正尝试在图像中间的文本旁边放置文本。 What code works for that?
哪些代码适用于此? The only way I've found possible, but not accurate is by messing with the padding.
我发现可能但不准确的唯一方法是弄乱填充。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); #wrapper2 h1 { text-align: center } #wrapper2 p { text-align: center; } .col-md-6 { padding: 0; }
<div class="container-fluid"> <div id="wrapper2"> <div class="row"> <div class="col-md-6"> <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg> </div> <div class="col-md-6"> <h1>Men's Line</h1> <p>Shop our newest 2017 arrivals</p> </div> </div> </div> </div>
https://jsfiddle.net/u5qngm5q/ https://jsfiddle.net/u5qngm5q/
You need to define your own custom column css class and set its display to table-cell. 您需要定义自己的自定义列css类,并将其显示设置为table-cell。 Finally, make vertical-align and text-align properties to middle.
最后,将vertical-align和text-align属性设置为中。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); #wrapper2 h1 { text-align: center } #wrapper2 p { text-align: center; } .col-md-6 { padding: 0; } .custom-column{ display:table-cell; height:100%; width:50%; vertical-align:middle; text-align:center }
<div class="container-fluid"> <div id="wrapper2"> <div class="row"> <div class="custom-column"> <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg> </div> <div class="custom-column"> <h1>Men's Line</h1> <p>Shop our newest 2017 arrivals</p> </div> </div> </div> </div>
Adding display: flex;
添加
display: flex;
and align-items: center;
和
align-items: center;
to the .row
class will have this effect. .row
类将具有此效果。 Also adding flex-wrap: wrap;
还添加了
flex-wrap: wrap;
will make the code responsive. 将使代码响应。 Then add
flex-grow:1;
然后添加
flex-grow:1;
to your text container for centering the text in mobile view Fiddle 到您的文本容器,以使文本在移动视图小提琴中居中
<div class="row flex-center">
<div class="col-md-6 text-container">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
.flex-center {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.text-container {
flex-grow : 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.