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

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

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

对齐

选项 #1：Flexbox

在这里，您包装文本框并为它们提供包装器 display: flex; 以将所有内容声明为 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; 声明所有 divs 内联元素，因此它们可以通过使用 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，而不是使用 divs，而是使用普通列表项。 “列表项目符号”将被删除 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。

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

How to group message boxes and center them

html

css

grouping

centering