How to group message boxes and center them - html

Question

I'm totally new to webdesign and all of the things. I'm trying to create textboxes and center them.
Here is what I have now:
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>
Output
Is there an easier way to group all those mesageboxes and center them all at once? At the moment all the margin-left have been done by hand..
Thnx in advanced

Answer 1

You could use flexboxes, CSS-Grid or simply wrap all the boxes and declare them as inline-block and align them then with text-align.
Option #1: Flexbox
Here you wrap the textboxes and give them the wrapper display: flex; to declare everything as flex elements. Then you can use justify-content: center; to center them.
.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>
Option #2a: Inline-blocks using a div as wrapper
With this method, you declare all the divs inline elements with display: inline-block; and as such they can be centered by using 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>
Option #2b: Inline-blocks using a list
Same methode as #2a. However you use an unordered list as a wrapepr and instead of using divs you use the normal list items. The "list bullet" will eb removed with 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>
Option #3: CSS Grid
Messy as it is complicated for this use and total overkill. As such you better of to stick with flexbox or inline-block.