it-roy-ru.com

Как центрировать раскрывающееся меню CSS

Мне нужна помощь. У меня есть раскрывающееся меню CSS, но я хочу, чтобы заголовки были центрированы так, чтобы на всех размерах экрана он был посередине, так как в данный момент он застрял слева.

http://jsfiddle.net/y4vDC/

Любая помощь будет принята с благодарностью.

Вот немного кода HTML:

<div id='cssmenu'>
  <ul>
    <li><a href='events.html'><span>Events</span></a></li>
  </ul>
4
DanCarroll

замените эту CSS на то, что у вас есть для #cssmenu> ul> li:

#cssmenu > ul > li {

    display:inline-block;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}

и добавьте это к своим кодам CSS:

 #cssmenu > ul {
        text-align:center;
 }

вот оно: http://jsfiddle.net/y4vDC/10/

6
user1447420

Вам необходимо, чтобы ваши элементы li были inline, а затем используйте text-align в родительском элементе для их центрирования:

#cssmenu ul {
  text-align:center;
}
#cssmenu ul li {
  display: inline;
}

Для того, чтобы они остались как inline, вам нужно удалить float из элементов списка.

http://jsfiddle.net/y4vDC/13/

2
pzin

у вас есть как минимум 2 простых варианта:

  1. установить ul как display:table и margin:auto;http://jsfiddle.net/y4vDC/11/
  2. установите ul как display:inline-block и text-align:center для родителя http://jsfiddle.net/y4vDC/12/
0
G-Cyr