DIV中心无法正常工作[重复]

Question

这个问题在这里已有答案：

• How to horizontally center a <div>? 101回答

我已经尝试使用边距，表格样式和引导程序css修复它，但它不起作用

我需要A标签在label-row-overview div中居中并且具有响应性

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

Answer 1

将display: block和text-align: center应用于div可以解决问题：

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

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

您可以将此CSS应用于内部：

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将宽度设置为50％。任何小于包含的宽度都可以。保证金：0自动实际居中是什么。

如果你的目标是IE8 +，那么最好改为：

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定宽度即可工作。

如果您不想在内部div上设置固定宽度，可以执行以下操作：

    #outer {
      width: 100%;
      text-align: center;
    }

   #inner {
      display: inline-block;
   }

    <div id="outer">  
        <div id="inner">Foo foo</div>
    </div>

Answer 3

您的a标签自然与文本对齐，因为它们不是块元素，因此在其父容器上使用text-align: center可以解决此方案中的问题。

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