Question

我想将3个div对齐并且在一个更大的div中居中 HTML

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>

我的CSS应该是什么？

Answer 1

    <div id="wrapper">
                <div class="Cell"  id="first">
                    <p>first</p>
                </div>
                <div class="Cell"  id="second">
                    <p>second</p>
                </div>
                <div class="Cell"  id="third">
                    <p>third</p>
                </div>
            </div>
        </div>

<style>
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }
#first{
    width:20%;
}
#second{
    width:60%;
}
#third{
    width:20%;
}

Answer 2

这是我决定使用的

HTML

<div id="wrapper">
  <div id="first" style="margin-left:25%;"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

CSS

#wrapper {
           width: 100%;
           min-width: 900px;
  }
#first {
           width:100px;
           float:left;
}
#second {
           width:100px;
           float:left;
}
#third {
           width:100px;
           float:left;
}

Answer 3

如果您使用了float：

＆＃13;

body {
  text-align: center;
}
#wrapper {
  display: inline-block; /* inline-table will do too */
}
#wrapper div {
  float: left;
  width: 100px;
  min-height: 5em;
  border: solid;
}

＆＃13;

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

＆＃13;

with float + table

＆＃13;

#wrapper {
  display:table;
  margin:auto;
  }
#wrapper > div {
  float:left;
  width:100px;
  min-height:5em;
  border:solid;
  }

＆＃13;

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

＆＃13;

表和表格单元格;

＆＃13;

#wrapper {
  display:table;
  margin:auto;
  }
#wrapper > div {
  display:table-cell;
  width:100px;
  height:5em;
  border:solid;
  }

＆＃13;

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

＆＃13;

有弹性;

＆＃13;

#wrapper {
  display:flex;
  justify-content:center;
  margin:auto;
  }
#wrapper > div {  
  width:100px;
  height:5em;
  border:solid;
  }

＆＃13;

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</div>

＆＃13;

并且根据最后预期的行为，它们可能会有很多变化。

将div标签彼此对齐并居中

3 个答案: