Как центрировать контент с помощью: before в CSS
У меня есть следующий код css:
При этом создается наведение курсора на изображение.
Эффект наведения - это синяя крышка и белая стрелка, которая скользит слева.
Вот так:
Неизвестный:
Завис:
«\ f04b» - белая стрелка. Как я могу центрировать значок в синем поле? Я попытался добавить отступ в
sidebar-article-thumb: до, .sidebar-best-thumb: до
но он добавляет отступ ко всему синему наложению, а не к белому значку внутри.
Как я могу центрировать значок внутри синего поля?
.sidebar-article-thumb img,
.sidebar-best-thumb img {
border: 1px solid #021a40;
position: relative;
max-width: none;
height: 100%;
width: auto;
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.sidebar-article-thumb:before,
.sidebar-best-thumb:before {
content: "\f04b";
font-family: FontAwesome;
font-size: 40px;
color: #fff;
position: absolute;
top: 0;
left: -100%;
height: 100%;
width: 100%;
background: #00ade6;
z-index: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Я обнаружил следующее: : before,: after и заполнение
Что казалось актуальным, но я не мог понять, как применить это к приведенному выше css.
Попробуйте сделать онлайн-демонстрацию с вашим кодом.
Ответы 4
Line-height сделает это, \ f04b - это символ.
line-height: 50%;
или же
line-height: 100px;
Используйте position: relative в контейнере и
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
в псевдоэлементе (: before) для центрирования символа.
Пример:
.container {
position: relative;
/* Demo */
width: 300px;
height: 300px;
border: 1px solid #000;
}
.container:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* Demo */
width: 30px;
height: 30px;
border: 1px solid #000;
}<div class = "container"></div>Попробуйте использовать vertical-align: middle;
Использование flexbox в контейнере творит чудеса.
.container {
align-items: center;
display: flex;
justify-content: center;
}
(Я просто создал свою собственную стрелку вместо использования font-awesome, но принципы все те же)
Я до сих пор не могу комментировать другие сообщения (только начал сегодня). Использование абсолютной позиции требует, чтобы вы знали высоту и ширину вашего элемента и вычтите это из 50%. vertical-align, конечно же, центрирует его только по вертикали. Использование flexbox - лучший и самый простой способ центрировать его как по вертикали, так и по горизонтали.
Вам совсем не обязательно знать ширину и высоту, просто используйте transform: translate (-50%, - 50%); (это работает так же, как работают margin-top: - (height / 2) и margin.left: (width / 2).
Также поделитесь своим фрагментом
html.