DIV center is not working [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 5 years ago.
I already tried fixing it with margin, table styles, and the bootstrap css but it isnt working
I need the A tags to center in the label-row-overview div and be responsive
HTML
<div class="label-row-overview">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></div>
</div>
Style.css
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}

Answer 1

<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
You can apply this CSS to the inner :
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width to 50%. Any width less than the containing will work. The margin: 0 auto is what does the actual centering.
If you are targeting IE8+, it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width.
If you don't want to set a fixed width on the inner div you could do something like this:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>

Answer 2

Applying display: block and text-align: center to the div does the trick:
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}
.label-row-overview {
display: block;
text-align: center;
}
<div class="label-row-overview">
<a href="{URL}" target="_blank">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
</a>
<a href="{URL}" target="_blank">
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></div>
</a>
</div>

Answer 3

Your a tags are naturally aligned with text since they are not block elements, so using text-align: center on their parent container solves the problem in this scenario.
.label-row-overview{
text-align: center;
}
.label-row-overview a {
color: #FFF;
background-color: #12a19b;
padding: 10px;
display: inline-block;
margin: 5px;
overflow: hidden;
}
<div class="label-row-overview">
<div class="label-img-overview"><span>EXTRA FOTO'S</span></div>
<div class="label-img-overview leftxspace"><span>MAATTABELLEN</span></div>
<div class="label-img-overview leftxspace"><span>PRODUCT SPECS</span></div>
<div class="label-img-overview leftxspace"><span>CERTIFICATEN</span></div>
</div>