Центрирование меню CSS по вертикали и горизонтали на странице

Question

Центрирование меню CSS по вертикали и горизонтали на странице

0

На первой странице моего сайта я просто хочу, чтобы меню навигации было ориентировано по вертикали и горизонтали на странице. Я пробовал кучу разных подходов, и это самое близкое, что я пришел.

Я не уверен, как центрировать ссылки с 1 по 4 по горизонтали, и я также не уверен, что меню действительно центрировано по вертикали в синем поле.

(Кроме того, это не фактическая цветовая схема. У меня есть цветные фоны, добавленные для отображения границ каждого элемента.)

Вот HTML:

<body>
<div id="centered">
<ul>
    <li><h1><a href="link1.html">LINK1</a></h1></li>
    <li><h1><a href="link2.html">LINK2</a></h1></li>
    <li><h1><a href="link3.html">LINK3</a></h1></li>
    <li><h1><a href="link4.html">LINK4</a></h1></li>
</ul>     
</div>
</body>

И CSS:

html, body   { 
    background-color: black; 
    height: 100%; 
    margin: 0; 
    padding: 0;
        color: white; 
        text-align: center; }

a { 
    text-decoration: none; 
    color: #fff;
    }

h1 {
    font-size: 1.5em;
    color: #000;
    }

#centered { 
    border: solid black; 
    background-color: blue; 
    height: 20%; 
    width: 100%;
    position: absolute; 
    top: 40%; 
    }

#centered ul {
    list-style-type:none;
    margin:0;
    padding:0;
    } 

#centered li {
    float:left;
    display:inline;
    }

Демо здесь: http://jsfiddle.net/chassen2/n84ey/

user3054531 01 дек. 2013, в 15:33

Источник

Теги:

html

css

2 ответа

0

Изменения CSS

html, body {
    background-color: black;
    height: 100%;
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
}
a {
    text-decoration: none;
    color: #fff;
}
h1 {
    font-size: 1.5em;
    color: #000;
}
#centered {
    border: solid black;
    background-color: blue;
    height: 20%;
    width: 100%;
    position: relative;
    top: 40%;
    vertical-align:middle;
}
#centered ul {
    list-style-type:none;
    text-align:center;
    display:inline-block;
    margin-right:auto;
}
#centered li {
    float:left;
    padding: 3px 6px;
}

DevlshOne 01 дек. 2013, в 12:16

0

Спасибо! это близко, но похоже, что слева от ссылки 1 больше места, чем справа от ссылки 4. Знаете ли вы, почему это происходит?
user3054531 01 дек. 2013, в 14:40
0

Попробуйте устранить padding в #centered li
DevlshOne 01 дек. 2013, в 14:43

Ещё вопросы

Спасибо! это близко, но похоже, что слева от ссылки 1 больше места, чем справа от ссылки 4. Знаете ли вы, почему это происходит?
Попробуйте устранить padding в #centered li

mdesdev · Accepted Answer · 2013-12-01T14-15-00.000Z

Сначала не используйте заголовок в ссылках, второй... здесь FIDDLE

<div id="centered">
  <ul>
    <li><a href="link1.html">LINK 1</a></li>
    <li><a href="link2.html">LINK 2</a></li>
    <li><a href="link3.html">LINK 3</a></li>
    <li><a href="link4.html">LINK 4</a></li>
  </ul>     
</div>


#centered { 
  border: none; 
  background: blue; 
  height: 150px; 
  width: 100%;
  text-align: center;
  position: absolute; 
  top: 50%;
  margin-top: -75px;
}

#centered ul {
  list-style: none;
  margin-top: 58px;
  padding: 0;
} 

#centered li {
  display: inline-block;
  margin: 0 20px 0 20px;
}

#centered li a { 
  text-decoration: none; 
  font-family: Verdana;
  font-size: 24px;
  color: #fff;
  transition: color 0.2s linear;
}
#centered li a:hover {
  color: #888;
}