Question

我似乎无法在标题中垂直对齐图像。它水平对齐，但是朝向标题的顶部稍远。

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;


}

我想要定位的图像是一个48px宽和48px高的小设置cog（user_settings）。

Answer 1

这是一种解决方法：

#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％所以它将自己居中。

您可能还必须设置元素的高度才能生效，或者使用百分比来使用要向上移动元素的像素。

Answer 2

在css中有一个垂直对齐属性，可以根据不同的内容进行估算。检查这个w3schools tuts。 Vertical-align property

Answer 3

我解决了这个问题，我忘记了将html，body元素的填充和边距设置为0.这会在屏幕顶部产生一个小的白色间隙，使得它看起来像是图像放置不正确。很抱歉，更正的代码看起来很不方便：

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

Answer 4

尝试使用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);
 }

或者您可以尝试自动保证金：

.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);
});

Answer 5

在不久的将来（现在有70％的浏览器支持）你可以做到这一点，这是一个更简单和优雅的解决方案：

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

将图像垂直对齐居中

5 个答案: