DIV center is not working

Question

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">
  <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>

Style.css

.label-row-overview a {
  color: #FFF;
  background-color: #12a19b;
  padding: 10px;
  display: inline-block;
  margin: 5px;
  overflow: hidden;
}

ibyanik · Answer 1 · 2018-01-24T12:21:48.723

<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>

score 0 · Accepted Answer · edited Feb 28 '19 at 14:26

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>

score 0 · Answer 3 · answered Jan 24 '18 at 12:21

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">
<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>

DIV center is not working

3 Answers3