Question

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

我需要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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您的TrustManager代码自然与文本对齐，因为它们不是块元素，因此在其父容器上使用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中心无法正常工作

3 个答案: