Как выравнивание вертикально div - CSS

Мне хотелось бы знать, что способы существуют, чтобы выравнивать div вертикально, или любой признак как например section или article. Уже я знаю, что вопрос очень общий, но состоит в том, что я только что начался недавно с CSS. Спасибо.

3
задан 07.01.2017, 23:25
0 ответов

Существуют тысячи форм:

Метод высоты линии (Line-height method)

Пример: Выровненный текст вертикально.

Результат:

#hijo {
    line-height: 200px; //Damos 200px de alto para notar el efecto
}

Метод таблицы CSS (CSS Table method)

Пример:

<div id="padre">
    <div id="hijo">Contenido a centrar aquí.</div>
</div>

Результат:

#padre {
    display: table;
    height:200px;
}
#hijo {
    display: table-cell;
    vertical-align: middle;
}

Абсолютное положение и расширение (Абсолуте Поситионинг and Stretching)

Пример:

<div id="padre">
    <div id="hijo">Contenido aquí.</div>
</div>

Результат:

#padre {
    position: relative;
}
#hijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Плавающий Div (Флоатер Див)

Пример:

<div id="padre">
    <div id="flotante"></div>
    <div id="hijo">Contenido aquí.</div>
</div>

Результат:

#padre {height: 250px;}

#flotante {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#hijo {
    clear: both;
    height: 100px;
}

Из этого соединения достаньте пример. Существуют некоторые больше.

3
ответ дан 03.12.2019, 17:50