Как лучше всего центрировать текст по вертикали с помощью CSS (в моей ситуации)?
Я пытаюсь создать панель навигации, и эта панель навигации должна быть разделена на столбцы с сеткой CSS, чтобы я мог добавлять свои разные ссылки в эти разные блоки. Вот HTML и CSS:
HTML:
<div id = "navbar">
<div id = "navContainer">
<a href = "index.html" id = "profile" class = "link">Andreas Nagelgaard</a>
</div>
</div>
CSS:
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
border-bottom: 5px solid black;
}
#profile {
grid-column-start: profile;
}
#navContainer {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 90px;
display: grid;
grid-template-columns: [profile] 2fr [emptySpace] 3fr [otherone] 1fr [othertwo] 1fr [otherthree] 1fr;
}
.link {
text-align: center;
font-size: 1.5em;
font-weight: bold;
}
Теперь я хочу, чтобы ссылки располагались вертикально по центру панели навигации, и я нашел несколько разных способов: использование flexbox и align-items (это может создать проблемы с интервалом, потому что я хочу иметь пустое место посередине), используя vertical-align: middle и display: table, но это может привести к слишком большому количеству контейнеров.
Какое лучшее решение для моей ситуации (без использования flexbox)?
flex — новейший подход, таблица использовалась до того, как был изобретен flex, но нет «лучшего» способа
Ответы 3
Используйте Дисплей: гибкий и автоматическое поле по оси Y точно так же, вы можете игнорировать часть пробел: nowrap;, просто чтобы показать вам правильный результат в StackOverflow:
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
border-bottom: 5px solid black;
}
#profile {
grid-column-start: profile;
}
#navContainer {
display: flex;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 90px;
display: grid;
grid-template-columns: [profile] 2fr [emptySpace] 3fr [otherone] 1fr [othertwo] 1fr [otherthree] 1fr;
}
.link {
white-space: nowrap;
margin: auto 5px;
text-align: center;
font-size: 1.5em;
font-weight: bold;
}<div id = "navbar">
<div id = "navContainer">
<a href = "index.html" id = "profile" class = "link">Andreas Nagelgaard</a>
</div>
</div>Вы можете добавить высоту строки:
#profile{
line-height:90px;
}
Здесь вы указываете #profile размер высоты строки, такой же, как высота навигационной панели, поэтому он будет располагаться по центру по вертикали.
Или
#profile{
margin: auto 0;
}
Вы могли бы сделать это так...
.container {
height: 100px;
color: #fff;
width: 300px;
margin-left: auto;
margin-right: auto;
}
.content {
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}<div class = "container">
<div class = "content">Everything here will be in the exact center</div>
</div>
как насчет высоты строки: 90px; ?