how to centre align div horizontally when using flex direction column

Question

I have a container that has a table and a div with the display set to flex with flex-direction as the column.

I want to align the div centre align horizontally. Here is the code

<style>
    .container {
        display: flex;
        flex-direction: column;
        border: 1px solid red;
    }

    .mytable {
        width: 100%
    }

    table,
    th,
    td {
        border: 1px solid black;
    }

    .container2 {
        margin: 2.5em 0 0;
        display: flex;
        max-width: 30%;
        text-align: center;
    }

    .question {
        padding: 5px 20px;
        line-height: 20px;
        font-size: 14px;
        min-width: 50%;
        background-color: green;
        border: 1px solid rgba(27, 31, 35, 0.2);
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        color: white;
    }

    .answer {
        background-color: blue;
        padding: 5px 20px;
        line-height: 20px;
        font-size: 14px;
        min-width: 50%;
        border: 1px solid rgba(27, 31, 35, 0.2);
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        color: white;
    }
</style>
<div class="container">
    <div>
        <table class="mytable">
            <tr>
                <th>ABC</th>
                <th>DEF</th>
            </tr>
        </table>
    </div>

    <div class="container2">
        <span class="question">What is your Name</span>
        <span class="answer">Sunil Garg</span>
    </div>

</div>

I have tried justify-content and align-items CSS rules on the container2 class. But these rules are not getting applied. What is the issue?

As the text-align:center is set to the container2 class but still, its child div with class answer is not showing centre aligned text. what could be the possible issue?

Here is the fiddle https://jsfiddle.net/er_markar/nznddv4k/

Thanks!!

why you have a 2nd container inside your main container ? Isn't the question belong to column ABC and the answer to column DEF ?? — Alcaeus D, Apr 11 '18 at 13:44
@Bhuwan When using flexbox, you generally should use `justify-content` and `align-items` for alignment. — Tyler, Apr 11 '18 at 13:52
`align-items: center;` worked when I placed it in `.container2`. Here is your [editted fiddle](https://jsfiddle.net/nznddv4k/26/). Perhaps you had an typo or used it in the wrong place? — Tyler, Apr 11 '18 at 13:54
@Tyler generally yes, but margin auto is used too. Bootstrap 4 use this a lot and it works pretty well. — Christian G Fritsch, Apr 11 '18 at 13:55
@Tyler margin is also used to align the items. Read this https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties — Bhuwan, Apr 11 '18 at 14:01
@Tyler using justify-content and align-items are not working. Can you please verify on the provided fiddle? — Sunil Garg, Apr 12 '18 at 06:12
@SunilGarg It works for me... What browser (and version) are you using? — Tyler, Apr 12 '18 at 10:30

score 11 · Answer 1 · answered Apr 11 '18 at 13:55

To align children within flexbox, set the following to the parent:

1- justify-content to align children along the main/primary axis i.e. vertical axis if parent has flex-direction: column and horizontal axis if parent has flex-direction: row.

2- align-items to align children along the cross/secondary axis i.e. horizontal axis if parent has flex-direction: column and vertical axis if parent has flex-direction: row.

In your case, try:

.container {
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    justify-content: center; /* align children centered vertically */ 
    align-items: center; /* align children centered horizontally */
}

and remove margin from children that you are using to align children.

how to centre align div horizontally when using flex direction column

1 Answers1

Linked

Related