Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Flexbox Layout Module - Align inline-level element when it is a flex item

CSS3 Flexbox Layout Module - Align inline-level element when it is a flex item

Problem

Given that I have got this HTML code:

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Read more

And CSS:

div {
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: 1px solid #DDD;
    border-radius: 10px;
}

div h2 {
    font-size: 1.2307em;
    text-align: center;
}

div p {
    flex: 1;
    margin: 0.7692em 0;
}

How can I style the anchor so that it is horizontally centred?

Problem courtesy of: katranci

Solution

Set align-self: center on the (with browser-specific versions of the property too, of course). Inline elements do indeed become flex items, so no need for a block-level wrapper around .

That being said, if you're going to be using flexbox, you'll quickly discover that it often requires extra wrapping divs, so you may as well get used to that now. As long as you don't go crazy with them, this isn't a bad thing. The HTML5 spec even talks about how using divs for presentational purposes is appropriate. So don't feel too guilty about it when you just gotta add one.

Solution courtesy of: zomigi

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Flexbox Layout Module - Align inline-level element when it is a flex item

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×