CodePenВертикально выравнивание инлайн-блок в DIV с фиксированной высотой
Хочу выровнять как по вертикали, так и по горизонтали, высота и ширина контейнера будет зафиксирована относительно других extenal факторов.
Как это сделать?
Я попытался с помощью гибкого
display: flex;
justify-content: center;
flex-direction: column;
но он избавляется от моего горизонтального выравнивания
На самом деле, есть multipleways для достижения вертикального выравнивания, здесь один:
div {
width: 300px;
height: 150px;
background-color: #ddd;
text-align: center;
font-size: 0;
}
div::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
a {
width: 100px;
height:50px;
background-color: #ff0000;
display: inline-block;
vertical-align: middle;
font-size: 16px
}<div>
<a href="#">Some Text</a>
</div>Спасибо! перед вашим ответом я нашел ответ, используя позицию: relative; и положение: абсолютное; – Pontiacks
@Pontiacks Добро пожаловать. Да, как я уже упоминал, есть несколько способов, но я предположил, что вы хотите, чтобы элемент в нормальном потоке был элементом 'inline-block', который четко указан в заголовке вопроса. –
Нашли решение!
На сНу родителю:
position:relative;
На ребенка:
position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;
возможно дубликат [CSS: Вертикально выравнивание DIV, когда нет фиксированного размера DIV не известен] (HTTP://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-fixed-size-of-the-div-is-known) –