中心div元素如文本

时间：2016-12-15 13:33:43

标签： html css

我环顾四周但找不到有用的东西。我想以某种方式集中div个class="box"元素。以下是我希望如何的示例：

enter image description here

有人能告诉我怎么做这个吗？我尝试了一些显然不会起作用的东西，但到目前为止我的目标是：

body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}
.box {
  margin: auto 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 140px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}
<body>
  <div id="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>

P.S。请不要只发布代码。我想学习，请解释一切是如何运作的

6 个答案:

答案 0 :(得分：1)

使用 CSS Flexbox 。建立#main父div display: flex＆amp; justify-content: space-between。然后相应地将width添加到框中。像：

#main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 30%;
}

.box:nth-child(4),
.box:nth-child(5) {
  width: 45%;
}

请查看下面的代码段（使用完整视图以便更好地理解）：

＆＃13;
＆＃13; 
body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}

.box {
  margin: 10px 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 30%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}

.box:nth-child(4),
.box:nth-child(5) {
  width: 45%;
}
＆＃13; 
<body>
  <div id="main">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

答案 1 :(得分：1)

使用flexbox，您可以justify-content: space-around;和flex-wrap: wrap;这意味着沿着一条线平均空间元素，如果线条太多则开始换行。

以下是有关flexbox

的更多资源和示例

我在下面做了一个简单的例子。

＆＃13;
＆＃13; 
body {
  margin: 0;
}
#wall {
  background: #bed6e2;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.brick {
  width: calc(100%/9);
  height: 65px;
  background: #ab837b;
  border: 1px solid #222;
  border-radius: 3px;
  margin: 2px 0;
}
.brick.wide {
  width: calc((100% / 9) * 3);
}
＆＃13; 
<div id="wall">
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
  <div class="brick wide"></div>
  <div class="brick"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

希望这有用。

答案 2 :(得分：1)

Flexbox很棒，但它有缺点，我更喜欢坚持使用float。

有2个新类，box1和box2，它们具有特定于框大小的样式（您可能希望使用grid system来查看）

还有一个.clearfix类可以清除你的花车。

我冒昧地整理了你不需要的各种css。如果你想了解更多，请告诉我。

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
body {
  background-color: rgb(32, 32, 36);
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin: 0 auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border:3px solid rgb(20, 20, 26);  
  color: rgb(0, 0, 0);
}
.box {
  margin: 25px 0;
  height: 75px;
  border: 3px solid  rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
  float: left;
}
.box1 {
  width: 20%;
  margin-left: 10%;
}
.box1:nth-child(3) {
  margin-right: 10%;
}
.box2 {
  width: 35%;
  margin-left: 10%;
}
.box2:nth-child(2) {
  margin-right: 10%;
}
＆＃13; 
<body>
  <div id="main" class="clearfix">
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box2"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
    <div class="box box1"></div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

默认情况下，

div元素具有属性display: block。块级元素自动从新行开始，但在display: inline-block上添加属性.box将使元素存在于同一行。将text-align: center应用于包含.box es（即#main）的容器会将内联块置于内部。

或者，您可以将display: flex应用于#main，这将自动管理内部所有元素的位置（默认情况下，连续）。您可以在.box上进行广泛的自定义，而无需其他样式。在此处阅读更多内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 4 :(得分：0)

更新回答

尝试将display: flex用于父容器，如果要将包装内容放到第二行，请使用flex-wrap: wrap。

body {
  background-color: rgb(32, 32, 36);
  height: 100%;
}
#main {
  background-color: rgb(50, 50, 56);
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  overflow: auto;
  height: 95vh;
  color: rgb(0, 0, 0);
}

.container {
  display: flex;
  justify-content: space-between;
}

.container_second .box {
  width: 180px;
}

.box {
  margin: auto 0;
  left: 25;
  right: 25;
  top: 25;
  bottom: 25;
  height: 160px;
  width: 140px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(20, 20, 26);
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  background-color: rgb(70, 70, 76);
}
<body>
  <div id="main">
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="container container_second">
      <div class="box"></div>
      <div class="box"></div>
    </div>  
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div> 
  </div>
</body>

有关flex的完整参考 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 5 :(得分：0)

而不是在left_right中使用0边距（.box的边距样式）尝试使用40％

使用：

.box {
  margin: auto 40%;

而不是：

.box {
  margin: auto 0;

百分比将保持每边边距总宽度的40％。重要的是要注意，如果你改变盒子类的宽度，你也需要调整边距。

相关问题
最新问题