0

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Start</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper">
    <a href="start.html" id="start-button">Start</a>
</div>
</body>
</html>

这是我的 CSS：

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    width: 100%;
    height: 100%;

    background-color: black;

    overflow: hidden;
}

a#start-button {
    /* How to center? *?
}

我的问题是：如何将链接垂直居中？我不想给页面一个固定的高度。我尝试了一些选项，但它们都没有真正起作用或者不是我的问题。非常感谢！

4

3 回答 3

1

查看演示

你需要给父母和div display: table孩子display : table-cellvertical-align: middle

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
div#wrapper {
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: auto;
    display: table;
}

a#start-button {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
于 2013-10-03T13:01:52.253 回答
0

尝试在包含的 div 上使用 display:table-cell。然后您可以对其应用垂直对齐：中间。

于 2013-10-03T12:57:07.397 回答
0

干得好

选项1

工作演示

的HTML：

<div id="wrapper">
    <a href="start.html" id="start-button">Start</a>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    width: 100%;
    height: 100%;

    background-color: black;

    overflow: hidden;
}

a#start-button {
    display: list-item;
    list-style: none outside none;
    text-align: center;
}

CSS 代码更改：

a#start-button {
    display: list-item;
    list-style: none outside none;
    text-align: center;
}

选项 - 2

工作演示

的HTML：

<div id="wrapper">
    <a href="start.html" id="start-button">Start</a>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    width: 100%;
    height: 100%;
    display:table;

    background-color: black;

    overflow: hidden;
}

a#start-button {
    display: table-cell;
    text-align:center;
}

代码更改：

div#wrapper {
    width: 100%;
    height: 100%;
    display:table;

    background-color: black;

    overflow: hidden;
}

    a#start-button {
        display: table-cell;
        text-align:center;
    }

希望这可以帮助。

于 2013-10-03T12:57:29.130 回答