这是我关于stackoverflow的第一篇文章,希望一切顺利。

我有3个媒体对象,它们全部由图像和一些内容组成。我在将内容中心和图像左右对齐中心时遇到麻烦。我已附上了当前结果的图片以及我希望页面布局的示意图(请参见下文)。

Current
Desired

这是我的代码;

<!-- 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。免费的复古游戏机可以打开直到关闭,无法获得足够的!”“ Ale on point。免费的复古游戏机可以打开直到关闭,不能获得足够的!”
                        
                        客户满意度 %

最佳答案

尝试一下:

<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>

10-05 21:03
查看更多