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 回答