CSS: centering text within flex-wrapped buttons

Question

I have a several buttons on a page and I am suing flex and flex-wrap to give them spreading ability. I cannot however get the text within the elements to center in their 100x100 px boxes (the size is an attribute of the .

I tried some solutions here, but none of them seem to work for my situation: CSS Center text (Horizontal and Vertical) inside a DIV block

The Line-height solution does not work, as some of the text takes more than one line.

The absolute positioning solution also does not work as it places the buttons all on top one of another.

The table approach is undesirable as it does not allow the buttons to wrap. Also I am going to have over 30 of these buttons.

HTML:

<section id="directory">

                <a href="jaguarchagra.html">Jaguar Chagra</a>

                <a href="texttext.html">A marriage breaks up</a>

                <a href="texttext.html">Amasanga warmi</a>

                <a href="texttext.html">Anaconda caught</a>

                <a href="texttext.html">Big Water Killing</a>

            </section>

CSS:

#directory {
    display: flex;
    flex-wrap: wrap;
}

#directory a {
    background-color: #BFBDAF;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    text-decoration: none;
    color: black;
    text-align: center;
    vertical-align: middle; /* does nothing */

Here is an image of what it looks like so far:

score 1 · Accepted Answer · edited Sep 28 '17 at 17:38

1

You need to add align-items: center; to #directory a and make it a block-level element with display: flex.

#directory a {
    display: flex;
    background-color: rgb(191, 189, 175);
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    text-align: center;
    align-items: center;
}

edited Sep 28 '17 at 17:38

miken32

42,008
16
111
154

answered Dec 09 '16 at 22:51

Shannon Young

1,536
1
17
26

I never would have thought of flexing children inside an already flexed parent element. Thank you very much. Is 'align-items' a flex property as well? – Wangana Dec 09 '16 at 23:10
1

Yes, you should check the [W3C Recommendation](https://www.w3.org/TR/css-flexbox-1/#alignment) – Shannon Young Dec 09 '16 at 23:13

CSS: centering text within flex-wrapped buttons

1 Answers1