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-cellに与える必要がありますvertical-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

どうぞ

オプション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 に答える
0

含まれている div で display:table-cell を使用してみてください。次に、vertical-align:middle を適用できます。

于 2013-10-03T12:57:07.397 に答える