Выравнивание изображения по центру

Question

Выравнивание изображения по центру

0

Кажется, я не могу получить изображение для выравнивания по вертикали в заголовке. Он выравнивается горизонтально, но немного слишком далеко к вершине заголовка.

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 пикселей.

user3213163 15 фев. 2014, в 23:53

Источник

6

После долгих и исчерпывающих консультаций с самим собой в зеркале ванной W3C определил, что вертикальное центрирование / расположение элементов - это то, чего никто в здравом уме не мог бы хотеть ... Они рекомендуют наклонить голову вправо или влево на 90 градусов и используя «горизонтальное» центрирование.
Marc B 15 фев. 2014, в 22:04

Теги:

html

css

5 ответов

Ещё вопросы

После долгих и исчерпывающих консультаций с самим собой в зеркале ванной W3C определил, что вертикальное центрирование / расположение элементов - это то, чего никто в здравом уме не мог бы хотеть ... Они рекомендуют наклонить голову вправо или влево на 90 градусов и используя «горизонтальное» центрирование.

Ricky Stam · Answer 1 · 2014-02-15T20-02-00.000Z

Вот обходной путь:

#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 в% от высоты, чтобы он центрировал его.

Вероятно, вам также нужно будет установить высоту элемента для его работы или вместо процентов использовать пиксели, которые вы хотите переместить элемент вверх.

Vandervals · Answer 2 · 2015-05-13T08-00-00.000Z

В ближайшем будущем (сейчас это похоже на 70% поддержки браузера), вы можете сделать это, гораздо более простое и элегантное решение:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

Emil Borconi · Answer 3 · 2014-02-15T21-08-00.000Z

Попробуйте использовать 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);
});

user3213163 · Answer 4 · 2014-02-15T20-35-00.000Z

Я исправил эту проблему, я забыл установить прописку и край элементов html, body на 0. Это вызвало небольшой белый зазор в верхней части экрана, из-за которого казалось, что изображение было неправильно установлено. Извините за неудобства исправленный код должен выглядеть так:

html,body{
height:100%;
min-height:100%; 
width:100%
min-width:100%;
margin:0;
padding:0;
}

user2453217 · Answer 5 · 2014-02-15T20-12-00.000Z

есть свойство vertical-align в css, которое можно оценить при различном содержимом. Проверьте это w3schools tuts. Свойство Vertical-align