父母并排对齐2个div [英] Align 2 divs side by side in a parent

问题描述

我有两个并排的风格col2。
我想水平对齐这两个div。
今天，当我只有一列，我工作正常，但是当我把2 div并排，divs不居中。

I have 2 div side by side with style "col2". I would like to align these 2 div horizontally. Today when i have only one column, i works fine, but when i put 2 div side by side, the divs are not centered.

IMG

HTML

HTML

<div class="secondGroup">
    <div class="col2">
        <p class="titleSection">test 1</p>
        <hr />
    </div>
    <div class="col2">
        <p class="titleSection">test 2</p>
        <hr />
    </div>
</div>

CSS

CSS

.secondGroup {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    overflow: auto;
}

.col2 {
    float: left;
    width: 46.3%;
    height: 350px;
    background: white;
}

.col2:last-child {
    margin-left: 40px;
}

.col2 .title {
    float: left;
    margin-left: 20px;
    font-size: 14px;
}

推荐答案

code> .secondGroup ，一个带有显示：flex; 属性的弹出框，并从子节点中删除浮动属性。

Just make the parent, .secondGroup, a flex box with the display:flex; property and remove the float properties from the children.

.secondGroup {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    overflow: auto;
    display:flex;
}

.col2 {
    width: 46.3%;
    height: 350px;
    background: white;
}

.col2:last-child {
    margin-left: 40px;
}

.col2 .title {
    margin-left: 20px;
    font-size: 14px;
}

<div class="secondGroup">
    <div class="col2">
        <p class="titleSection">test 1</p>
        <hr />
    </div>
    <div class="col2">
        <p class="titleSection">test 2</p>
        <hr />
    </div>
</div>

这篇关于父母并排对齐2个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！