Question

如何对齐此中心阻止fiddle？

显示是块因为有宽度和高度现在我无法对齐此标签的页面中心 HTML：

<div style="position:relative;top:30px;">
    <a href="#events" class="scroll submit">abcdefghijk</a> 
    <a href="#" class="submit">abcde</a> 
    <a href="#" class="submit">abc</a>
</div>

更新我想，我应该使用left:50%来对齐一个div

的CSS：

.submit {
  background-clip: padding-box;
  background-color: #CD1D27;
  border-radius: 9px / 10px;
  color: #FFFFFF;
  font-family: Francois One,sans-serif;
  height: 46px;
  padding: 8px 30px;
  width: 153px;
  display:block;
  float:right;
}

Answer 1

将text-align添加到您的容器中：

<div style="position:relative;top:30px;text-align:center;display:block;">
    <a href="#events" class="scroll submit">abcdefghijk</a> 
    <a href="#" class="submit">abcde</a> 
    <a href="#" class="submit">abc</a>
</div>

Updated fiddle.

Answer 2

还有一个解决方案，

<div style="position:relative;top:30px; display: table;  margin: 0 auto;">
    <a href="#events" class="scroll submit">abcdefghijk</a> 
    <a href="#" class="submit">abcde</a> 
    <a href="#" class="submit">abc</a>
</div>

Answer 3

嘿，我的朋友用这个


    .submit{
     position:absolute;
     width:300px;
     height:200px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-100px 0 0 -150px;
     background:red;
}

Answer 4

如果您有固定的宽度，可以使用position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;水平对齐div。如果你想在中心垂直对齐div，你也需要设置div的高度。

例如

    <div style="position:absolute;top:0;left:0;bottom:0;right:0;margin:1em auto 0 auto;width:340px">
        <a href="#events" class="scroll submit">abcdefghijk</a> 
    <a href="#" class="submit">abcde</a> 
   <a href="#" class="submit">abc</a>
</div>

如何将中心div与块显示对齐？

4 个答案: