时间戳

首页 > 解决方案 > 如何水平对齐两个

年代？

css - 如何水平对齐两个
年代？

问题描述

我正在使用 <figure> 显示两个图像，并且我希望两个 <figure> 水平内联，而服务 div 位于页面中心。我的 div 居中，但我无法让 <figure> 对齐。我试过“显示：内联块；” 但它似乎不起作用。我究竟做错了什么？

.services {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 20px;
    text-align: center;
}

.figurecenter figure {
    display: inline-block;
}

.figurecenter figcaption {
    margin: 0 auto;
}
                <div class="services">
                    <figure class="figurecenter">
                        <h1>PHSR</h1><br>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        <figcaption>PHSR (Pre-Start Health &amp; Safety Review)?<br>We can help.</figcaption><br>
                        <a href="about/phsr.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </figure>

                    <figure class="figurecenter">
                        <h1>Inspections</h1><br>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        <figcaption>Rack inspections identify safety concerns and deficiencies with rack storage systems.</figcaption><br>
                        <a href="about/inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </figure>
                    <div style="clear: both;" > </div>
                </div>

请忽略损坏的按钮和其他东西，因为当我的问题只是让两个 <figure> 并排排列时，我不想为我的工作包含整个样式表。

标签： cssalignmentfigure

解决方案

你也可以做到这一点margin-bottom: auto。

查看片段时请点击“整页”

.services {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 20px;
    text-align: center;
}

.figurecenter {
  flex: 1;
  margin-bottom: auto;
}

.figurecenter figure {
    display: inline-block;
}

.figurecenter figcaption {
    margin: 0 auto;
}
                <div class="services">
                    <figure class="figurecenter">
                        <h1>PHSR</h1><br>
                        <img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"><br><br>
                        <figcaption>PHSR (Pre-Start Health &amp; Safety Review)?<br>We can help.</figcaption><br>
                        <a href="about/phsr.html" class="button" title="Click here to read more about PHSR">READ MORE</a><br><br>
                    </figure>

                    <figure class="figurecenter">
                        <h1>Inspections</h1><br>
                        <img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"><br><br>
                        <figcaption>Rack inspections identify safety concerns and deficiencies with rack storage systems.</figcaption><br>
                        <a href="about/inspections.html" class="button" title="Read more about our inspection process">READ MORE</a>
                    </figure>
                    <div style="clear: both;" > </div>
                </div>

推荐阅读