Отцентрировать изображение по вертикали HTML/CSS

385

26 ноября 2016, 19:46

* { 
	padding: 0; 
	margin: 0; 
} 
#header { 
	height: 100vh; 
	width: 100%; 
	background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-attachment: fixed; 
	overflow: hidden; 
} 
.mw { 
	max-width: 1190px; 
	margin: 0 auto; 
} 
 
#header_nav { 
	position: absolute; 
	width: 1190px; 
	height: 90px; 
	left: 0; 
	right: 0; 
	margin: 35px auto; 
	background: #fff; 
} 
#header_nav img { 
	position: relative; 
	margin: auto 10px; 
    height: 60px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Umbrella</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
</head> 
<body> 
	<div id="header_nav"> 
		<img src="https://www.google.com/photos/about/static/images/google.svg"> 
	</div> 
	 
	<div id="header"> 
		<div class="mw"> 
			 
		</div> 
	</div> 
</body> 
</html>

Как мне отцентрировать картинку "Google"?

Answer 1

Вариант 1 (vertical-align: middle; text-align: center;):

* { 
	padding: 0; 
	margin: 0; 
} 
#header { 
	height: 100vh; 
	width: 100%; 
	background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-attachment: fixed; 
	overflow: hidden; 
} 
.mw { 
	max-width: 1190px; 
    width: 100%; 
	margin: 0 auto; 
} 
 
#header_nav { 
	position: absolute; 
	max-width: 1190px; 
    width: 100%; 
	height: 90px; 
	left: 0; 
	right: 0; 
	margin: 35px auto; 
	background: #fff; 
   
  text-align: center; 
} 
#header_nav:before{ 
  content: ''; 
  display: inline-block; 
  vertical-align: middle; 
  height: 100%; 
} 
#header_nav img { 
   vertical-align: middle; 
	position: relative; 
	margin: auto 10px; 
    height: 60px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Umbrella</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
</head> 
<body> 
	<div id="header_nav"> 
		<img src="https://www.google.com/photos/about/static/images/google.svg"> 
	</div> 
	 
	<div id="header"> 
		<div class="mw"> 
			 
		</div> 
	</div> 
</body> 
</html>

Тоже, но без псевдоэлемента:

* { 
	padding: 0; 
	margin: 0; 
} 
#header { 
	height: 100vh; 
	width: 100%; 
	background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-attachment: fixed; 
	overflow: hidden; 
} 
.mw { 
	max-width: 1190px; 
    width: 100%; 
	margin: 0 auto; 
} 
 
#header_nav { 
	position: absolute; 
	max-width: 1190px; 
    width: 100%; 
	height: 90px; 
  line-height: 90px; 
	left: 0; 
	right: 0; 
	margin: 35px auto; 
	background: #fff; 
   
  text-align: center; 
} 
 
#header_nav img { 
	position: relative; 
	margin: auto 10px; 
    height: 60px; 
  vertical-align: middle; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Umbrella</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
</head> 
<body> 
	<div id="header_nav"> 
		<img src="https://www.google.com/photos/about/static/images/google.svg"> 
	</div> 
	 
	<div id="header"> 
		<div class="mw"> 
			 
		</div> 
	</div> 
</body> 
</html>

Вариант 2 (flex):

* { 
	padding: 0; 
	margin: 0; 
} 
#header { 
	height: 100vh; 
	width: 100%; 
	background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
	background-repeat: no-repeat; 
	background-size: 100%; 
	background-attachment: fixed; 
	overflow: hidden; 
} 
.mw { 
	max-width: 1190px; 
    width: 100%; 
	margin: 0 auto; 
} 
 
#header_nav { 
	position: absolute; 
	max-width: 1190px; 
    width: 100%; 
	height: 90px; 
	left: 0; 
	right: 0; 
	margin: 35px auto; 
	background: #fff; 
   
    display: flex; 
    align-items: center; 
    align-content: center; 
    justify-content: center; 
} 
 
#header_nav img { 
	position: relative; 
	margin: auto 10px; 
    height: 60px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Umbrella</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
</head> 
<body> 
	<div id="header_nav"> 
		<img src="https://www.google.com/photos/about/static/images/google.svg"> 
	</div> 
	 
	<div id="header"> 
		<div class="mw"> 
			 
		</div> 
	</div> 
</body> 
</html>

Answer 2

#header_nav - line-height: 90px;

#header_nav img - vertical-align: middle;

* { 
  padding: 0; 
  margin: 0; 
} 
#header { 
  height: 100vh; 
  width: 100%; 
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
  background-repeat: no-repeat; 
  background-size: 100%; 
  background-attachment: fixed; 
  overflow: hidden; 
} 
.mw { 
  max-width: 1190px; 
  margin: 0 auto; 
} 
#header_nav { 
  position: absolute; 
  width: 1190px; 
  height: 90px; 
  line-height: 90px; 
  left: 0; 
  right: 0; 
  margin: 35px auto; 
  background: #fff; 
} 
#header_nav img { 
  position: relative; 
  margin: auto 10px; 
  height: 60px; 
  vertical-align: middle; 
}

<div id="header_nav"> 
  <img src="https://www.google.com/photos/about/static/images/google.svg"> 
</div> 
 
<div id="header"> 
  <div class="mw"> 
 
  </div> 
</div>

Answer 3

В стили #header_nav img добавьте

#header_nav img {
    top: calc(50% - 30px);
}

Answer 4

добавить к #header_nav display: flex

или, т.к. у вас фиксированная высота картинки и родительского блока

#header_nav img {
position: relative; 
height: 60px;
margin-top: 45px;
top: -30px;
}

Answer 5

* { 
  padding: 0; 
  margin: 0; 
} 
#header { 
  height: 100vh; 
  width: 100%; 
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); 
  background-repeat: no-repeat; 
  background-size: 100%; 
  background-attachment: fixed; 
  overflow: hidden; 
} 
.mw { 
  max-width: 1190px; 
  margin: 0 auto; 
} 
#header_nav { 
  position: absolute; 
  width: 1190px; 
  height: 90px; 
  left: 0; 
  right: 0; 
  margin: 35px auto; 
  background: #fff; 
  vertical-align: middle 
} 
#header_nav img { 
  margin: auto 10px; 
  height: 60px; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Umbrella</title> 
  <link rel="stylesheet" href="css/main.css" type="text/css"> 
</head> 
 
<body> 
  <div id="header_nav"> 
    <img src="https://www.google.com/photos/about/static/images/google.svg"> 
  </div> 
 
  <div id="header"> 
    <div class="mw"> 
 
    </div> 
  </div> 
</body> 
 
</html>