0

使用以下 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

希望这是有道理的，感谢你们都是忙碌的人，非常感谢任何帮助！

伊基

4

2 回答 2

1

将它们包裹在 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为#buttons120 + 10 (margin) + 120 = 250px。

其余的很简单：

#login, #register {
    float: left;
    width: 145px;
    height: 90px;
}

#login {
    margin-right: 10px;
}

这是一个将所有东西聚集在一起的小提琴。

于 2013-03-31T20:49:44.083 回答
0

像这样？

http://jsfiddle.net/VqmeG/

基本上它只是

text-align: center
于 2013-03-31T20:52:46.050 回答