Центр и дно выравнивают полный список (снова)

Question

Центр и дно выравнивают полный список (снова)

0

Во-первых, я понимаю, что в stackoverflow уже есть похожие вопросы, но ни одно из представленных решений не работает для меня. Я до сих пор не могу правильно настроить навигацию - к центру и дну div, называемому "header".

Вот скрипка http://jsfiddle.net/dsguffey/g3Rg2/

HTML:

<html>
<body>
<div class="container">
  <div id="header">
    <ul>
      <li>
      <p class="quote">Site quote,</p>
      <p class="quote">goes here</p>
      </li>         
      <li>Music</li>
      <li>Games</li>
      <li>Writing</li>
      <li>Art</li>
      <li>About me</li>
    </ul>
  </div>

  <div id="writing_page">
    <div id="writing_box">
    </div>
  </div>

  <div id="footer" style="text-align:center;">
  <span style="text-align:center;color:white;">
    </span>
  </div>
</div>
</body>
</html>

CSS:

html{
  height:100%;
}
body{
  height:100%;
}   
.container{
  width:100%;
  height:100%;
}
#footer{
  position:absolute;
  height:100px;
  width:100%;
  bottom:0px;
  background-color:#000000;
}
/*navigation*/
#header{
  position:absolute;
  display:table-cell;
  text-align:center;
  vertical-align:text-bottom;
  vertical-align:bottom;
  height:100px;
  width:100%;
  background-color:#000000;
}
#header ul{
  list-style-type:none;
  text-align:center;
  vertical-align:bottom;
  vertical-align:text-bottom;
}
#header li{
  display:inline-block;
  color:goldenrod;
  margin-right:10px;
  margin-left:10px;
  font-size:10pt;
  font-weight:bold;
  font-family:'Segoe Script';
}
.quote{
  text-align:right;
  font-size:18pt; 
}
/*Content*/
#writing_page{
  position:absolute;
  width:100%;
  top:100px;
  bottom:100px;
  background-image:url('./images/bg.png');
  color:black;
  overflow-y:scroll;
  overflow-x:hidden;
}

Я могу получить список навигационного меню в центре по горизонтали (вот как это делается на скрипке сейчас), но все, что я делаю, чтобы заставить его центрировать по горизонтали, делает его таким, чтобы оно больше не выравнивало нижнее и наоборот! Я попытался включить #header, ul и/или li в display: table-cell. Кроме того, я попытался использовать положение: абсолютное и нижнее: 0px на UL. Я пробовал использовать автоматические поля, вертикальное выравнивание: нижнее, вертикальное выравнивание: текстовое дно и все остальное, о чем я могу думать. Я попытался выставить высоту ul и li на 100px или поместить список внутри таблицы с заданной высотой и шириной. Это сводит меня с ума. Любая помощь будет оценена по достоинству.

Примечание. В дополнение к CSS выше, есть также сброс в скрипке, который решает некоторые проблемы с форматированием. Я кратко опустил его здесь для краткости.

user2970690 09 нояб. 2013, в 01:42

Источник

Теги:

html

css

navigation

center

1 ответ

Ещё вопросы

fletch · Accepted Answer · 2013-11-09T01-55-00.000Z

Возможное решение для вас... используя немного CSS, который вы предоставили в своем jsfiddle. Я изменил position на #header на relative. Затем задайте несколько свойств на #header ul. Используемое position:absolute и bottom:0 для выравнивания ul в нижней части #header. Затем установите left:50% чтобы переместить левый край в центр. Установите фиксированную width:680px (не стесняйтесь настраивать) и margin-left:-340px (который отрицательный 1/2 ширины, поэтому отрегулируйте, если вы измените ширину). Я также удалил некоторые дополнительные свойства, которые на самом деле ничего не делали. Надеюсь это поможет.

#header{
  position:relative;
  text-align:center;
  height:100px;
  width:100%;
  background-color:#000000;
}
#header ul{
    position:absolute;
    bottom:0;
    left: 50%;
    width: 680px;
    margin-left: -340px;
    list-style-type:none;
    text-align:center;
}

Обновление: Почему #header имеет position:relative.

Абсолютные позиционированные элементы будут расположены относительно первого родительского элемента, который имеет положение, отличное от static. Если ни один не найден, он использует контейнер html. В этом случае вы хотите, чтобы ul была позиционирована как absolute но относительно родительского элемента #header. Надеюсь, что ответит на вопрос. Не бойтесь играть со значениями... особенно в интересах дальнейшего развития ваших знаний.

Спасибо вам большое! Оно работало завораживающе. Я понимаю все изменения, которые вы внесли, за исключением одной вещи. Почему позиция заголовка должна быть относительной?
Я обновил решение, чтобы ответить на ваш вопрос об элементе #header . Если решение сработало, не забудьте пометить его как принятый ответ. Это принесет пользу нам обоим. :)