[英]Bootstrap 4 center (horizontally) image + text inside div
Bootstrap 4:引导程序 4:
How to horizontally center a div that contains an image and text to the right of the image?如何将包含图像和文本的 div 水平居中放置在图像的右侧?
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Heading |
+ IMG +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| | Lead |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
I tried making three columns inside a row,我试着在一行内制作三列,
<div class="row">
<div class="col"></div>
<div class="col-auto">
<img src="..." width="..." height="..." />
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
<div class="col"></div>
</div>
but the problem is the heading is too long and wraps around to the next line.但问题是标题太长,绕到下一行。 If I make the middle column larger, it is no longer centered.
如果我使中间列更大,它不再居中。 I need it to be centered regardless of text length.
无论文本长度如何,我都需要将其居中。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="row justify-content-center"> <div class="col-3"> <img src="https://pixlr.com/photo/image-design-11-1-pw.jpg" style="width: 100%;height: 100%;" /> </div> <div class="col-9"> <h5>Hello World</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p> </div> </div>
Try this code试试这个代码
<div class="text-center">
<div class="row justify-content-md-center">
<div class="col-md-auto">
<img src="https://placehold.it/100x100">
</div>
<div class="col-md-auto">
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
</div>
</div>
Working demo here: https://www.bootply.com/UHz1ACh2CI这里的工作演示: https : //www.bootply.com/UHz1ACh2CI
I figured it out.我想到了。
<div class="row">
<div class="col-12 d-flex flex-row justify-content-center">
<img src="..." width="..." height="..." />
<div>
<h1 class="display-5 m-0">...</h1>
<p class="lead">...</p>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.