Центрирование строки меню с помощью CSS

Question

Центрирование строки меню с помощью CSS

0

У меня две проблемы с моей панелью меню. То, что я хочу достичь, - центрировать ссылки на заголовке (включая изображение логотипа) и иметь точно такую же высоту для заголовка, что и в меню. Когда я добавляю ссылки, он создает маржу сверху и снизу (поэтому заголовок будет расширяться), и я понятия не имею, почему. Размер поля зависит от размера шрифта, и если я хочу его удалить, я должен добавить маркер -something px и попробовать пиксель за пикселем, какой должен быть номер. Я уверен, что там есть более простое решение... Моя другая проблема заключается в том, что я не могу центрировать всю панель меню в заголовке, если не указать конкретную ширину. Очевидно, я не знаю, насколько широка моя панель меню (и даже если я ее каким-то образом буду измерять, что, если я позже изменил ссылки?) Я новичок в HTML и CSS, поэтому я, вероятно, сделал кучу ошибок, Я просто продолжаю менять коды до тех пор, пока не получу то, что хочу, но так как я пытаюсь научиться этому лучше. Я стремлюсь к более глубокому пониманию, чем к случайному кодированию, поэтому не стесняйтесь ничего исправить. Здесь HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My website</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet'   type='text/css'>
</head>

<body>

<div id="header">
<div id="menu">
<ul>
<li><img src="images/ncs.png" /></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li id="right"><a href="#">English</a></li>
</ul>
</div>
</div>


</body>
</html>

И CSS:

@charset "utf-8";

body {
background-color: #efe8df;
}

#header {
width: 100%;
height: auto;
background-color: #afafaf;
position: absolute;
top:0px;
left:0px;
right:0px;
}

#menu {
margin: auto;
padding: 0px;
list-style: none;
font-family:'Belleza', sans-serif;
color: white;
font-size: 22px;
/*width: 1000px;*/
height: auto;
position: relative;
}

#menu li {
list-style: none;
width: auto;
height: auto;
text-align: center;
vertical-align: middle;
display: table-cell;
border-right: 1px solid #ebeaea;
}

#menu li a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}

#menu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 30px;
border-bottom: 3px solid transparent;
}

#menu li a:hover {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}

#menu li a:active {
color: #46b5c2;
text-decoration: none;
background-color: #ebeaea;
display: block;
padding: 30px;
border-bottom: 3px solid #46b5c2;
}

#menu #right {
border-right: 0px;
font-family: Georgia;
font-size: 14px;
}

Заранее спасибо!

user3215000 20 янв. 2014, в 13:51

Источник

Теги:

html

css

menu

center

3 ответа

0

добавьте ширину в div #menu

menu {
margin: auto;
padding: 0px;
list-style: none;
font-family: 'Belleza', sans-serif;
color: white;
font-size: 22px;
width: 1000px;
height: auto;
position: relative;
width: 960px; //or whatever
}

wpdaniel 20 янв. 2014, в 11:10

0

попробуйте добавить это в свой css, измените ширину на все, что хотите, в соответствии с вашими потребностями

#menu {

width: 900px;

Sankalp Srivastava 20 янв. 2014, в 09:46

Ещё вопросы

Sudhanshu Yadav · Accepted Answer · 2014-01-20T10-59-00.000Z

Заголовок расширяется, потому что для ul и li у всех браузеров есть маржа и стандарты дополнений. Вы должны использовать reset.css и normalize.css, чтобы удалить свойство css по умолчанию для некоторых общих элементов.

поэтому, если вы хотите просто использовать список

ul,li{margin:0; padding:0} ul,li{margin:0; padding:0} или сколько вы хотите.

Для выравнивания по центру вы можете дать следующие свойства css

заголовок

display: table

к меню

display : table-cell;
text-align:center

на ул.

display:inline-block

в ли

 float:left

Проверьте скрипку http://jsfiddle.net/gJFy8/1/

Спасибо, это именно то, что мне было нужно! Теперь я могу центрировать строку меню, не зная точной ширины меню :) Также я никогда раньше не слышал о reset и normalize.css, но я определенно буду использовать его с этого момента! Еще раз спасибо :)