使用以下 css/html 我在屏幕上显示了我的 Logo 死点。
img.alignmiddle {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
HTML:
<a href="http://www.abc.com/home"><img class="alignmiddle" src="abc.png"></a>
我现在想在主图像下方添加两个 img 按钮(登录和注册)。我希望这两张图片并排显示，居中位于主图片下方。有人可以帮我处理代码吗？
例如
M A I N I M A G E
Login Register
希望这是有道理的，感谢你们都是忙碌的人，任何帮助都非常感谢!
伊基
最佳答案
将它们包裹在 <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>
现在，我假设您知道按钮的比例。例如，我的 Logo 是 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 像素，请更正 width的 #buttons到 120 + 10(边距)+ 120 = 250px .
剩下的就很简单了:
#login, #register {
float: left;
width: 145px;
height: 90px;
}
#login {
margin-right: 10px;
}
这是一个Fiddle将所有这些汇集在一起。
关于html - 将一个图像在另一个垂直和水平 CSS 下居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15734325/