将它们包裹在 a<div/>
或其他内容中:
<div id="buttons">
<a href="#login">Login</a>
<a href="#trg">Register</a>
</div>
然后使用这个CSS:
#buttons {
wdth: 200px; /* change to whatever fits */
margin: 0 auto; /* with a given width this centers a display:block element */
}
如果您想将整个事物水平和垂直居中,我会执行以下操作:
首先,将所有内容包装在一个<div/>
:
<body>
<div>
<div id="home">
<a href="#">
<img src="logo.png"/>
</a>
</div>
<div id="buttons">
<a href="#" id="login">Login</a>
<a href="#" id="register">Register</a>
</div>
</div>
</body>
现在,我假设您知道按钮的比例。例如,我的徽标是 200x100 像素,我的按钮是 145x90 像素,margin
两者之间有 10 像素。现在,我的包装器具有最大宽度和高度:
body > div {
position: absolute;
top: 50%;
left: 50%;
width: 300px; /* 145 + 10 + 145 */
height: 200px; /* 100 + 10 + 90 */
margin-top: -100px;
margin-left: -150px; /* width * -0.5 */
}
然后,我在每一行周围使用了另一个包装器。如果你绝对确定比例不会改变,你可以不用,但对于这个例子,我认为你需要更加灵活。首先,我们使两个内部包装器水平居中:
body > div > div {
margin: 0 auto;
}
这仅适用于给定的width
。所以给他们一个大小:
#home {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
#buttons {
width: 300px;
height: 90px;
}
这是基本的。你现在有一个外包装,它使整个东西在两个方向上居中,内包装水平居中,尽管它们的宽度。例如:如果您的按钮只有 120x90 像素,请将 of 更正width
为#buttons
120 + 10 (margin) + 120 = 250px
。
其余的很简单:
#login, #register {
float: left;
width: 145px;
height: 90px;
}
#login {
margin-right: 10px;
}
这是一个将所有东西聚集在一起的小提琴。