Вертикальная центральная ссылка на экране в HTML

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? *?
}

Мой вопрос: как я могу центрировать ссылку по вертикали? Я не хочу придавать странице фиксированную высоту. Я попробовал некоторые варианты, но они все не работали или не очень требовали моей проблемы. Большое спасибо!

Теги:
center

3 ответа

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;
    }

Надеюсь это поможет.

Поделиться
  • 0
    Это на самом деле не работает.
  • 0
    Вы видели оба моих варианта? Оба не работают или один из них? - @DennisvB
Показать ещё 2 комментария
1

См. Демонстрацию

Вам нужно предоставить родительский div display: table и child 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;
}
Поделиться
  • 0
    добавить центр выравнивания текста также к .. Я пытался сделать то же самое, но не применил ячейку таблицы к +1 для вашего ответа ....
  • 0
    Спасибо, обновил ответ :)
Показать ещё 1 комментарий
0

Попробуйте использовать display: table-cell в содержащем div. Затем вы можете применить выравнивание по вертикали: к середине.

Поделиться
  • 0
    vertical-align:middle
  • 0
    Спасибо, я понимаю, что вы имеете в виду в других ответах.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню