Question

我似乎很难将按钮放在屏幕中央。这是源代码。

<a href="#" class="header-button">View Products</a>

以下是样式

/*header button styles*/

a.header-button {
    display: inline-block;
    background-color:#
}

a.header-button:hover {
    color: #e8ddc8;
    text-decoration: underline;
}

.header-button {
    background-color:#031634;
    color:#e8ddc8;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
    text-align:center;
}

你看，即使我将text-align:center放在.header-button中，按钮也不会将自己定位在中心位置。（见下图）

enter image description here

任何人都可以帮助我吗？

Answer 1

试试这个。 Working Fiddle

a.header-button {
    display: block;
    background-color:#;
    margin:0 auto;
    width:100px;
}

Answer 2

一个解决方案：http://jsfiddle.net/xzY5j/

css：

.header-button {
    background-color:#031634;
    color:#e8ddc8;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
}

.container {
    text-align:center;
    width: 100%;
    padding: 50px;
    background-color:#ccc;
}
}

HTML

<div class="container">
    <a href="#" class="header-button">View Products</a>
</div>

其他建议是： Binita Tamang解决方案是她在我有机会之前写的，所以我会让她得到它的信誉：）

Answer 3

您应该给容器或父元素text-align:center

jsfiddle

<强> HTML

<div class="parent">
<a href="#" class="header-button">View Products</a>
</div>

CSS：

.parent{

 text-align:center;    
}

Answer 4

如果你想在屏幕中间放置一个button或任何element，那么请使用绝对位置a给予前50％并保持50％现在，给予边距仅为其宽度的一半和负高度：

这样的事情：

<强> CSS

button{
        position:absolute;
        top:50%;
        left:50%;
        width:100px;
        height:30px;
        margin:-15px 0 0 -50px;
      }

如果只剩下中间那么：

button{
        position:absolute;
        top:some_top_in_px;
        left:50%;
        width:100px;
        height:30px;
        margin:0px 0 0 -50px;
      }

Fiddle DEMO

将按钮放在中心位置

4 个答案: