使用弹性方向栏时如何水平对齐div

Question

我有具有表和与所述一个div的容器display设定为flex与flex-direction为column 。

我想将div中心水平对齐。 这是代码

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

我已经在container2类上尝试了justify-content和align-items CSS规则。 但是这些规则没有得到应用。 有什么问题

由于将text-align:center设置为container2类，但是其类别answer子div仍未显示居中对齐的文本。 可能是什么问题？

这是小提琴https://jsfiddle.net/er_markar/nznddv4k/

谢谢！！

Answer 1

要在flexbox对齐子flexbox ，请将以下项设置为父级：

1- justify-content沿着主/主轴线，即垂直轴如果父母有对准孩子flex-direction: column和水平轴如果父具有flex-direction: row 。

2 align-items沿交叉/辅助轴对齐子align-items ，即，如果父级具有flex-direction: column ，则水平轴对齐；如果父级具有flex-direction: row ，则使垂直轴对齐。

对于您的情况，请尝试：

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

并从用来对齐子级的子级中删除margin 。