CODEWITHSUNDEEP
htmlcssflexboxtext-alignment
Wangana
Wangana

Reputation: 233

CSS: centering text within flex-wrapped buttons

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

Upvotes: 0

Views: 7036

Answers (1)

Shannon Young
Shannon Young

Reputation: 1576

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

Upvotes: 1

Related Questions