0

I'm using <figure> to display two images and I want the two <figure>s to be horizontally inline while the services div is centred on the page. I've got the div centred but I can't get the <figure>s to line up. I've tried "display: inline-block;" but it doesn't seem to work. What am I doing wrong?

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

Please ignore the broken buttons and other things as I didn't want to include the entire stylesheet for my work when my issue is just getting the two <figure>s to line up side-by-side.

Hideto
  • 309
  • 1
  • 3
  • 14

1 Answers1

0

You could achieve this with margin-bottom: auto as well.

Please click "full page" when vieweing snippet

.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>
JohnDoe
  • 507
  • 7
  • 21