这是我关于 stackoverflow 的第一篇文章，希望一切顺利。
我有 3 个媒体对象，它们都包含一个图像和一些内容。我无法将内容中心和图像对齐到中心的左侧和右侧。我附上了当前结果的图片以及我希望页面布局方式的图表(见下文)。
这是我的代码；
<!-- Reviews start !-->
<section id="reviews">
<div class="media border p-3 center-stuff col">
<img src="images/prof-1.jpg" class="rounded-circle media-img mt-2 align-self-center">
<div class="media-body col-md-12 center-stuff">
<h4 class="mt-3">Stan Dutton <small><i>In Store Review on October 18, 2019</i></small></h4>
<blockquote>
<p class="mb-3">"Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!""Ale on point. Free retro games consoles playable open till close, can't get enough!"</p>
</blockquote>
<p class="center-stuff">Customer Satisfaction %</p>
<div class="progress col-6 center-stuff mb-3">
<div class="progress-bar" style="width:93%"></div>
</div>
</div>
</div>
<div class="media border p-3 mt-3">
<div class="media-body col-md-12 center-stuff">
<h4 class="mt-3">Stan Dutton <small><i>In Store Review on October 18, 2019</i></small></h4>
<blockquote>
<p class="mb-3">"Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!""Ale on point. Free retro games consoles playable open till close, can't get enough!"</p>
</blockquote>
<p class="center-stuff">Customer Satisfaction %</p>
<div class="progress col-6 center-stuff mb-3">
<div class="progress-bar" style="width:93%"></div>
</div>
</div>
Stan Dutton 2019 年 10 月 18 日店内评论
"Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!" "Ale on point. Free retro games consoles playable open till close, can't get enough!""Ale on point. Free retro games consoles playable open till close, can't get enough!"客户满意度 %
最佳答案
尝试一下:
<section id="reviews">
<div class="media border p-3 center-stuff col">
<img
src="images/prof-1.jpg"
class="rounded-circle media-img mt-2 align-self-center"
/>
<div class="media-body col-md-12 center-stuff">
<h4 class="mt-3">
Stan Dutton
<small
><i>In Store Review on October 18, 2019</i></small
>
</h4>
<blockquote>
<p class="mb-3">
"Ale on point. Free retro games consoles playable
open till close, can't get enough!" "Ale on point.
Free retro games consoles playable open till close,
can't get enough!" "Ale on point. Free retro games
consoles playable open till close, can't get
enough!" "Ale on point. Free retro games consoles
playable open till close, can't get enough!""Ale on
point. Free retro games consoles playable open till
close, can't get enough!"
</p>
</blockquote>
<p class="center-stuff">Customer Satisfaction %</p>
<div class="progress col-6 center-stuff mb-3">
<div class="progress-bar" style="width:93%"></div>
</div>
</div>
</div>
<div class="media border p-3 center-stuff col">
<div class="media-body col-md-12 center-stuff">
<h4 class="mt-3">
Stan Dutton
<small
><i>In Store Review on October 18, 2019</i></small
>
</h4>
<blockquote>
<p class="mb-3">
"Ale on point. Free retro games consoles playable
open till close, can't get enough!" "Ale on point.
Free retro games consoles playable open till close,
can't get enough!" "Ale on point. Free retro games
consoles playable open till close, can't get
enough!" "Ale on point. Free retro games consoles
playable open till close, can't get enough!""Ale on
point. Free retro games consoles playable open till
close, can't get enough!"
</p>
</blockquote>
<p class="center-stuff">Customer Satisfaction %</p>
<div class="progress col-6 center-stuff mb-3">
<div class="progress-bar" style="width:93%"></div>
</div>
</div>
<img
src="images/prof-1.jpg"
class="rounded-circle media-img mt-2 align-self-center"
/>
</div>
<div class="media border p-3 center-stuff col">
<img
src="images/prof-1.jpg"
class="rounded-circle media-img mt-2 align-self-center"
/>
<div class="media-body col-md-12 center-stuff">
<h4 class="mt-3">
Stan Dutton
<small
><i>In Store Review on October 18, 2019</i></small
>
</h4>
<blockquote>
<p class="mb-3">
"Ale on point. Free retro games consoles playable
open till close, can't get enough!" "Ale on point.
Free retro games consoles playable open till close,
can't get enough!" "Ale on point. Free retro games
consoles playable open till close, can't get
enough!" "Ale on point. Free retro games consoles
playable open till close, can't get enough!""Ale on
point. Free retro games consoles playable open till
close, can't get enough!"
</p>
</blockquote>
<p class="center-stuff">Customer Satisfaction %</p>
<div class="progress col-6 center-stuff mb-3">
<div class="progress-bar" style="width:93%"></div>
</div>
</div>
</div>
</section>
关于html - 在 Bootstrap 媒体对象中对齐图像和媒体主体中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59217308/