Question

我有2个div并排风格“col2”。我想水平对齐这两个div。今天，当我只有一列时，我的工作正常，但当我并排放置2个div时，div不会居中。

IMG

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

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

Answer 1

只需将父.secondGroup设为具有display:flex;属性的弹性框，然后从子项中删除浮动属性。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需删除

即可

  MyClass test = new MyClass();
  // test will be expanded to have 1 item: test[0]
  test[0].y = 456;
  // test will be expanded to have 6 items [0..5]
  test[5].x = 123;

来自.col2 .title，您的代码也正常工作

Answer 3

删除float: left;并将display: inline-block;添加到.col2将成为焦点。

.col2 {
    display: inline-block;
    width: 46.3%;
    height: 350px;
    background: white;
}

<强> Working Fiddle

Answer 4

已更新，请使用display: inline-block

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

.col2 {
    display: inline-block;
    width: 46.3%;
    height: 350px;
    background: white;
}

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

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

现场演示：https://jsfiddle.net/cw5cojbo/5/

在父级中并排对齐2个div

4 个答案: