Кажется, я не могу получить изображение для выравнивания по вертикали в заголовке. Он выравнивается горизонтально, но немного слишком далеко к вершине заголовка.
Html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" placeholder="Search magical instruments, tricks, books and more">
</div>
<div class="user_settings">
<img src="onebit_09.png" width="48px" height="48px">
</div>
</body>
</html>
Css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-top:0;
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:absolute;
left:20%;
top:4%;
width:27%;
padding:5px;
padding-right:50px;
outline:none;
border: 2px solid #9C4B8F;
border-radius: 5px;
background-color:#FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
color:grey;
background-image: url('search.png');
background-position: 100% -10px;
background-repeat:no-repeat;
}
.search_bar input[type="text"]:focus{
background-color:#FFFFFF;
border-color:#333333;
}
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin:-24px 0 0 -24px;
}
Изображение, которое я пытаюсь установить, - это небольшие настройки cog (user_settings), которые имеют ширину 48 пикселей и высоту 48 пикселей.
Вот обходной путь:
#elementToAlignVertically
{
margin-top:50%;
transform:translate(0px,-50%);
-ms-transform:translate(0px,-50%);
-moz-transform:translate(0px,-50%);
-webkit-transform:translate(0px,-50%);
}
В основном вы выравниваете элемент на 50% сверху, а затем используете перевод, чтобы переместить его -50 в% от высоты, чтобы он центрировал его.
Вероятно, вам также нужно будет установить высоту элемента для его работы или вместо процентов использовать пиксели, которые вы хотите переместить элемент вверх.
В ближайшем будущем (сейчас это похоже на 70% поддержки браузера), вы можете сделать это, гораздо более простое и элегантное решение:
.container img{
width: 100%;
height: auto;
}
@supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
Попробуйте использовать calc, чтобы он не работал во всех браузерах, но в некоторых из них будет:
.user_settings img
{
position:absolute;
top:5%;
left:95%;
height:48px;
width:48px;
margin-top: calc(50% - 24px);
margin-top: -webkit-calc(50% - 24px);
margin-top: -moz-calc(50% - 24px);
}
или вы можете попробовать маржу auto:
.user_settings img
{
position:absolute;
top:0;
bottom:0;
left:95%;
height:48px;
width:48px;
margin-top: auto;
}
Или еще мой любимый и самый надежный - использовать некоторый javascript для управления позицией.
Например jQuery что-то вроде:
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
Затем убедитесь, что вы также добавили наблюдателя изменения размера:
$(window).on('resize', function(){
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
});
Я исправил эту проблему, я забыл установить прописку и край элементов html, body на 0. Это вызвало небольшой белый зазор в верхней части экрана, из-за которого казалось, что изображение было неправильно установлено. Извините за неудобства исправленный код должен выглядеть так:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
margin:0;
padding:0;
}
есть свойство vertical-align в css, которое можно оценить при различном содержимом. Проверьте это w3schools tuts. Свойство Vertical-align