Выровняйте один элемент по левому краю и один по центру экрана и выровняйте по вертикали оба - CSS

Question

Выровняйте один элемент по левому краю и один по центру экрана и выровняйте по вертикали оба - CSS

0

У меня есть один список и заголовок h1. Я хочу, чтобы список находился слева, а h1 - в центре экрана. Кроме того, я хочу, чтобы h1 был вертикальным, совпадающим с серединой списка. Высота и ширина (не так много, чтобы перекрываться с заголовком. На меньших экранах я просто помещу список вниз по заголовку) списка неизвестно. H1 будет всего одним словом. Таким образом, список определяет высоту контейнера.

HTML

<header>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <h1>BLOG</h1>
</header>

CSS

header{
   width: 100%;
}
ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

ul, h1{
  display: inline-block;
  vertical-align:middle;
}

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

Извините за мой английский

Справка:

http://css-tricks.com/centering-in-the-unknown/

http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

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

ОБНОВИТЬ

Предоставление макета фотографии

Laxmana 21 март 2014, в 16:22

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Adriannom · Accepted Answer · 2014-03-21T13-40-00.000Z

Здесь один из способов сделать это, добавив пару оберток к вашей разметке:

<header>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <div id="h1-outer-wrapper">
    <div id="h1-inner-wrapper"> 
      <h1>BLOG</h1>
    <div>
  </div>
</header>

И CSS:

header {
  width: 100%;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul, #h1-outer-wrapper {
  display: inline-block;
  vertical-align: middle;
}
#h1-inner-wrapper {
  position: absolute; 
  width: 100%;
  left: 0;
}
h1 {
  text-align: center;
  padding: 0;
  margin: -.6em 0 0 0;
}

Спасибо! Извините за поздний ответ. Работает отлично;