如何对消息框进行分组并将它们居中

Question

我对网页设计和所有事情都是全新的。我正在尝试创建文本框并将它们居中。 这是我现在拥有的：

Index.php & css

.messagebox {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:210px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 200px;
}
.messagebox1 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 418px;
}
.messagebox2 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:210px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 606px;
}
.messagebox3 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 824px;
}
.messagebox4 {
  position:fixed;
  background-color:#267677;
  color:#ffffff;
  border:3px solid #ffffff;
  font-family:Arial Black, Gadget, sans-serif;
  font-size:24px;
  width:180px;
  z-index:1;
  padding:2px;
  text-align: center;
  margin-left: 1012px;
}

<div class="messagebox">Naam Winkel</div>
<div class="messagebox1">15/08/2020</div>
<div class="messagebox2">Totaal (Prijs)</div>
<div class="messagebox3">Door Wie?</div>
<div class="messagebox4">Extra Info?</div>

输出

有没有一种更简单的方法可以将所有这些消息框分组并同时居中？目前所有的margin-left都是手工完成的..

Thnx 进阶

Answer 1

您可以使用 flexbox、CSS-Grid 或简单地包装所有框并将它们声明为 inline-block，然后将它们与 text-align 对齐。

选项 #1：弹性盒

在这里你包装文本框并给它们包装器display: flex; 以将所有内容声明为弹性元素。然后您可以使用justify-content: center; 将它们居中。

.messagebox {
  min-width: 1200px;
  display: flex;
  justify-content: center;
}

.messagebox div {
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}

<div class="messagebox">
  <div>Naam Winkel</div>
  <div>15/08/2020</div>
  <div>Totaal (Prijs)</div>
  <div>Door Wie?</div>
  <div>Extra Info?</div>
</div>

选项 #2a：使用 div 作为包装器的内联块

使用此方法，您可以使用display: inline-block; 声明所有 div 内联元素，因此可以使用 text-align-center 将它们居中；

.messagebox {
  min-width: 1200px;
  text-align: center;
}

.messagebox div {
  display: inline-block;
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}

<div class="messagebox">
  <div>Naam Winkel</div>
  <div>15/08/2020</div>
  <div>Totaal (Prijs)</div>
  <div>Door Wie?</div>
  <div>Extra Info?</div>
</div>

选项 #2b：使用列表的内联块

方法与#2a 相同。但是，您使用无序列表作为 wrapepr，而不是使用 div，而是使用普通列表项。 “列表项目符号”将使用 list-style-type: none; 删除。

.messagebox {
  min-width: 1200px;
  text-align: center;
  list-style-type: none;
}

.messagebox li {
  display: inline-block;
  background-color: #267677;
  color: #ffffff;
  border: 3px solid #ffffff;
  font-family: Arial Black, Gadget, sans-serif;
  font-size: 24px;
  width: 210px;
  padding: 2px;
  text-align: center;
}

<ul class="messagebox">
  <li>Naam Winkel</li>
  <li>15/08/2020</li>
  <li>Totaal (Prijs)</li>
  <li>Door Wie?</li>
  <li>Extra Info?</li>
</ul>

选项 #3：CSS 网格

凌乱，因为这种用途很复杂，而且完全矫枉过正。因此，您最好坚持使用 flexbox 或 inline-block。