Блог

Главная - Вопросы по программированию - UL не центрируется внутри родительского div

UL не центрируется внутри родительского div

#html #css

#HTML #css

Вопрос:

Я пытаюсь центрировать элемент div, содержащий неупорядоченный встроенный список, на веб-странице. Я установил для полей содержащего div значение auto auto, правильно центрируя div на странице, но я не могу найти способ заставить встроенный список, который он содержит, правильно центрироваться внутри него. Встроенный список остается немного левее внутри div. Я попытался исправить, поместив: padding: auto auto; в содержащий элемент div, чтобы любой текст / списки, которые он содержал, были центрированы, но это не имеет никакого эффекта…

Я пытался

CSS:

 @font-face {
 font-family: 'Exo-Black';
 src: url('fonts/Exo-Black.otf');
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro-Bold.otf');
}

@font-face {
    font-family: 'SourceCodePro-Black';
    src: url('fonts/SourceCodePro-Black.otf');
}

@font-face {
    font-family: 'Exo-Bold';
    src: url('fonts/Exo-Bold.otf');
}

@font-face {
    font-family: 'Exo-Regular';
    src: url('fonts/Exo-regular.otf');
}

.icon {
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.name {
    font-family: Exo-Black;
    font-size: 32px;
    color: firebrick;
    width: 60%;
    text-transform: uppercase;
    float: left;
    margin-left: 10px;
    text-transform: uppercase;
}

.phone {
    font-family: SourceSansPro-Bold;
    font-size: 24px;
    float: left;
}

.nav {
    clear: left;
    width: 50%;
    font-family: SourceCodePro-Black;
    font-size: 24px;
    border: 1px solid #000000;
    margin: auto auto;
    padding: auto auto;
}

li { display: inline; }

HTMLcode:

  <div id="page">
  <div class="icon"> 
    <img src="pics/icon2.jpg" alt="" width="125" height="104" /> 
   </div>
  <div class="name">
    <p>Mount Vernon PC</p>
  </div>
  <div class="phone">
    <p>Call or Text: (555) 555 - 5555</p>
  </div>
  <div class="nav">
    <ul id="navigation">
      <li>Home</li>
      <li>Infection</li>
      <li>Repair</li>
      <li>Upgrade</li>
      <li>Build</li>
    </ul>
  </div>
</div>

Комментарии:

1. define .nav{margin:0 auto;}

2. я думаю, вы закрыли дополнительные разделы..

3. jsfiddle.net/Y6vLT

Ответ №1:

ul элемент по умолчанию имеет левый отступ ( padding-left ), чтобы маркеры не выталкивались из списка :

 ul#navigation { padding-left: 0; text-align:center; list-style-type:none; }

JSFiddle

Ответ №2:

Это то, что вы хотите? http://jsfiddle.net/L7yWJ /

 ul {
    padding:0;
    width:100%;
    text-align:center;
}

li {
    margin:10px;
    background:rgba(0,0,255,0.5);
    list-style-type: none;
}

Ответ №3:

Вы должны добавить display:block в li и text-align:center в элементе li. Кроме того, по умолчанию ul принимает отступ слева, поэтому вы должны установить для него значение 0.

 @font-face {
 font-family: 'Exo-Black';
 src: url('fonts/Exo-Black.otf');
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro-Bold.otf');
}

@font-face {
    font-family: 'SourceCodePro-Black';
    src: url('fonts/SourceCodePro-Black.otf');
}

@font-face {
    font-family: 'Exo-Bold';
    src: url('fonts/Exo-Bold.otf');
}

@font-face {
    font-family: 'Exo-Regular';
    src: url('fonts/Exo-regular.otf');
}

.icon {
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.name {
    font-family: Exo-Black;
    font-size: 32px;
    color: firebrick;
    width: 60%;
    text-transform: uppercase;
    float: left;
    margin-left: 10px;
    text-transform: uppercase;
}

.phone {
    font-family: SourceSansPro-Bold;
    font-size: 24px;
    float: left;
}

.nav {
    clear: left;
    width: 50%;
    font-family: SourceCodePro-Black;
    font-size: 24px;
    border: 1px solid #000000;
    margin: auto auto;
    padding: auto auto;
}

li { display: block; text-align:center;  }

ul { padding:0px; }

JSFIDDLE: http://jsfiddle.net/Husen/Y6vLT/3 /