Вывести логотип по центру

314

10 декабря 2016, 10:37

Здравствуйте. Не как не выходит вывести логотип по центру. Слева и справа должны быть ссылки, а логотип в центре. Буду благодарен за помощь.

* { 
	margin: 0; 
 	padding: 0; 
} 
 
body { 
	font-family: 'Montserrat', sans-serif; 
	font-size: 15px; 
	margin: 0 auto; 
} 
 
.cover { 
	/*text-align: center;*/ 
	position: relative; 
	background: url('images/index_cover.jpg'); 
	background-size: cover; 
	color: #fff; 
	height: 100vh; 
} 
 
.cover .mask{ 
	position: absolute; 
	display: block; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: #333; 
	opacity: 0.4; 
} 
 
#case_head { 
	background: #000; 
	position: relative; 
	top: 15px; 
} 
 
/*.logo { 
	top: 15px; 
	display: inline-block; 
	text-align: center; 
}*/ 
 
.logo { 
	 /*background: url('images/logo.png') no-repeat center;*/ 
	 width: 155px; 
	 height: 148px; 
	 margin: 0 auto; 
	 display: inline-block; 
} 
 
.user { 
	display: inline-block; 
	float: right; 
} 
 
.user a { 
	text-transform: uppercase; 
} 
 
.menu { 
	float: left; 
	display: inline-block; 
}

<!DOCTYPE html> 
<html lang="ru-RU"> 
<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Кемпинг Рыбчино</title> 
 
	<!-- Load fonts --> 
	<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
	<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
	<!-- Load css styles --> 
	<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
 
	<div class="cover"> 
		<div class="mask"></div> 
 
		<div id="case_head"> 
			<div class="menu"> 
				<a href="/">меню</a> 
			</div> 
			 
			<div class="logo"> 
				<img src="images/logo.png"> 
			</div> 
 
			<div class="user"> 
				<a href="/">Войти</a> 
				<a href="/">Регистрация</a> 
			</div> 
		</div> 
 
	</div>

Answer 1

Самое простое - использовать flex, как в коде ниже. Но можно и без него.

* { 
	margin: 0; 
 	padding: 0; 
} 
 
body { 
	font-family: 'Montserrat', sans-serif; 
	font-size: 15px; 
	margin: 0 auto; 
} 
 
.cover { 
	/*text-align: center;*/ 
	position: relative; 
	background: url('images/index_cover.jpg'); 
	background-size: cover; 
	color: #fff; 
	height: 100vh; 
} 
 
.cover .mask{ 
	position: absolute; 
	display: block; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: #333; 
	opacity: 0.4; 
} 
 
#case_head { 
	background: #000; 
	position: relative; 
	top: 15px; 
   
  height: 148px; 
  display: flex; 
  justify-content: space-between; 
} 
 
.menu { 
} 
 
.logo { 
} 
 
.user { 
} 
.user a { 
	text-transform: uppercase; 
}

<!DOCTYPE html> 
<html lang="ru-RU"> 
<head> 
	<meta charset="utf-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Кемпинг Рыбчино</title> 
 
	<!-- Load fonts --> 
	<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 
	<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> 
 
	<!-- Load css styles --> 
	<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
 
	<div class="cover"> 
		<div class="mask"></div> 
 
		<div id="case_head"> 
			<div class="menu"> 
				<a href="/">меню</a> 
			</div> 
			 
			<div class="logo"> 
				<img src="images/logo.png"> 
			</div> 
 
			<div class="user"> 
				<a href="/">Войти</a> 
				<a href="/">Регистрация</a> 
			</div> 
		</div> 
 
	</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить GET переменную с пробелами?

284

HTML

как перносить текст без пробелов в таблице

Таблица находится в блоке div который занимает 87% от всей странице в таблице указано width='100%' если ввести много текста без пробелов в td то таблица...

226

HTML

Как сделать такой вывод изображений?

ЗдравствуйтеЕсть несколько изображений, все примерно одинакового размера

206

HTML

.tpl шаблоны(PDO)

Делю сайт наtpl шаблоны

197