CODEWITHSUNDEEP
htmlcss
user3213163
user3213163

Reputation: 697

Aligning a image vertically center

I can't seem to get a image to align vertically in the header. It aligns horizontally but It is a little too far towards the top of the header.

The 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>

The 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;


}

The image that I'm trying to position is a little settings cog(user_settings) that is 48px wide and 48px high.

Upvotes: 0

Views: 104

Answers (5)

Vandervals
Vandervals

Reputation: 6054

In the near future (right now has like the 70% of the browser support) you can do this, a much simpler and elegant solution:

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

Upvotes: 0

Emil Borconi
Emil Borconi

Reputation: 3467

Try using calc for that it will not work in all browser but in some of them will do:

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

or you can try the margin auto:

.user_settings img
 {
 position:absolute;
 top:0;
 bottom:0;
 left:95%;
 height:48px;
 width:48px;
 margin-top: auto;
 }

Or still my favorite and most reliable is to use some javascript to manipulate the position.

For example jQuery something like:

$(".user_settings img").css('top',$(".user_settings).height()/2-24);

Then make sure you also add a resize watcher like this:

$(window).on('resize', function(){
$(".user_settings img").css('top',$(".user_settings).height()/2-24);
});

Upvotes: 0

Ricky Stam
Ricky Stam

Reputation: 2126

Here is a workaround:

#elementToAlignVertically
{
margin-top:50%;
transform:translate(0px,-50%);
-ms-transform:translate(0px,-50%);
-moz-transform:translate(0px,-50%);
-webkit-transform:translate(0px,-50%);
}

Basicaly you align the element 50% from the top and then use the translate to move it -50% of it's hight so it will center it self.

Probably you'll also have to set the height of the element for it to work or instead of percent use pixels that you want to move the element upwards.

Upvotes: 2

user3213163
user3213163

Reputation: 697

I fixed the problem, I had forgotten to set the padding and margin of the html,body elements to 0. This caused a small white gap at the top of the screen that made it seem like the image was not positioned correctly. Sorry for the inconvenience the corrected code should look like:

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

Upvotes: 0

user2453217
user2453217

Reputation: 1

there is a property vertical-align in css which can be valued at varied contents. Check this w3schools tuts. Vertical-align property

Upvotes: 0

Related Questions