Question

使用以下css / html我在屏幕上显示了我的徽标死点。

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

希望有意义，感谢你们所有忙碌的人，任何帮助，非常感谢！

伊基

Answer 1

将它们包裹在<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像素，请将width的{{1}}更正为120 + 10（边距）+ 120 = #buttons。

其余的很直接：

250px

这是一个Fiddle，它汇集在一起。

Answer 2

喜欢这个吗？

http://jsfiddle.net/VqmeG/

基本上只是

text-align: center

将一个图像在另一个垂直和水平CSS下居中

2 个答案: