Question

我想在主页中间添加一个链接到比赛的链接。

最好的方法是什么？

任何帮助表示赞赏！

Answer 1

<强> Demo

.button {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100px; /* width of button */
    height: 30px; /* height of button */
}

HTML

<button class="button">The button</button>

Answer 2

如果要垂直和水平居中一个元素，最好的方法是添加：

.link { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; }

（注意：这仅在.link元素具有指定的高度和宽度时才有效）

如果您只想将元素水平居中，最好的方法是在链接元素中添加display:inline或display:inline-block，并向父元素添加text-align:center链接元素。

Answer 3

这不是最好的方法......我会选择保证金自动方法......但是这个填充似乎可以完成这项工作！

您可能希望指定按钮宽度，或者将填充更改为大约48％以对抗按钮宽度，因为元素位于左上角...而不是中心。

<!DOCTYPE html>
<html>
<head>
<style>
.centdiv{
margin:auto;
width:100%;
padding:50%;
}
</style>
</head>
<body>
<div class="centdiv">
<button type="button" onclick="alert('Whoila!')">Click Me!</button>
</div>
</body>
</html>

Answer 4

You can use CSS property:
"Position: absolute"

EXP:

// html
<div id="button">
  <a href="your link"><img src="image link" /></a>
</div>


//CSS
.home{position:relative;}
#button{position:absolute; top:50%; left:50%;}

may be this will help you.

Answer 5

如果你总是需要在中间，你可以使用这个CSS。

input {
    left: 50%;
    position: fixed;
    top: 50%;
}

你可以在按钮上使用某个类并使用它。

Demo

在屏幕中间添加一个按钮

5 个答案: