1

Как выровнять меню по высоте (вертикально)

.header {
	background: #ccc;
	width: 100%;
	height: 90px;
	position: absolute;
	background: linear-gradient(to bottom, #c6cfe4, #ecf1fd);
}
.header-menu {
	margin: 0 auto;
	width: 960px;
	height: 90px;
	position: relative;
	
}
.logo-text {
	display: block;

}
.text-one {
	font-family: Arial;
	font-size: 45pt;
	font-weight: bold;
	background: linear-gradient(#6972b5, #3b589c);
	-webkit-background-clip: text; 
	color: transparent;
	box-shadow: 1px #fff:
}
.text-two {
	font-family: Arial; 

	color: #3b589c;
}

ul.header-blog li{
	list-style: none;
	display: inline;
	margin-left: 36px;
	font-size: 13pt;
	font-family: Arial;
	font-weight: bold;
	color: #2f57a1;	
}
.header-blog {
	float: right;
	vertical-align:middle;
	text-align: center;

}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Home</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/reset.css">
</head>
<body>
	<div class="header">
		<div class="header-menu">
			<div class="logo-text">
				<p class="text-one">Corporatix</p>
				<p class="text-two">Corporate Business PSD Template</p>
			</div>
			<ul class="header-blog">
				<li>Home</li>
				<li>Services</li>
				<li>Portfolio</li>
				<li>Testimonial </li>
				<li>Blog</li>
				<li>Contact Us</li>
			</ul>
		</div>
	</div>

</body>
</html>

1 ответ 1

1

Непонятно что и как нужно выровнять, может, как направление, так :

.header {
	background: #ccc;
	width: 100%;
	height: 90px;
	background: linear-gradient(to bottom, #c6cfe4, #ecf1fd);
}

.logo-text {
    float: left; 
    margin-left: 1%;
    width: 30%;
	height: 90px;
}
.text-one {
	font-family: Arial;
	font-size: 45pt;
	font-weight: bold;
	background: linear-gradient(#6972b5, #3b589c);
	-webkit-background-clip: text; 
	color: transparent;
	box-shadow: 1px #fff:
}
.text-two {
	font-family: Arial; 
	color: #3b589c;
}

.menu {
	float: left;
    width: 69%;
	height: 90px;
}

.header-blog {
     word-spacing: 12pt;
}

.header-blog li{
	list-style: none;
	display: inline;
	font-size: 13pt;
	font-family: Arial;
	font-weight: bold;
	color: #2f57a1;	
}
<body>
	<div class="header">

			<div class="logo-text">
			    
				<span class="text-one">Corporatix</span><br><span class="text-two">Corporate Business PSD Template</span>
                
			</div>
			<div class="menu">
			    
			  <ul class="header-blog">
				<li>Home</li>
				<li>Services</li>
				<li>Portfolio</li>
				<li>Testimonial </li>
				<li>Blog</li>
				<li>Contact Us</li>
			  </ul>
		      
		    </div>

	</div>
</body>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.