DIV 中心不工作

Question

我已经尝试用边距、table 样式和 bootstrap css 修复它，但它不起作用

我需要 A 标签在标签行概览中居中 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%。任何小于 containing 的宽度都可以。 margin: 0 auto 是真正的居中。

如果您的目标是 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>

DIV 中心不工作

DIV center is not working

html

css

margin

twitter-bootstrap