DIV中心无法正常工作

时间:2018-01-24 12:12:39

标签: html css twitter-bootstrap margin

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

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

display: blocktext-align: center应用于div可以解决问题:

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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