Вертикальное выравнивание ul в ответном макете

Question

Я изо всех сил старался сосредоточиться на ul с помощью id="menu" по вертикали в этом гибком макете.

Понравилось бы, чтобы рука попала в нужное место. Я хочу, чтобы он был направлен вертикально вправо. Список состоит из кругов, указывающих, где вы находитесь в макете прокрутки одной страницы, а также функционирует как навигация.

<ul id="menu"> 
    <li data-menuanchor="firstPage"><a href="#firstPage">1</a></li> 
    <li data-menuanchor="secondPage"><a href="#secondPage">2</a></li> 
    <li data-menuanchor="3rdPage"><a href="#3rdPage">3</a></li> 
    <li data-menuanchor="4thpage"><a href="#4thpage">4</a></li> 
</ul> 
<div id="1"><p>O</p></div> 
<div id="2"><p>O</p></div> 
<div id="3"><p>O</p></div> 
<div id="4"><p>O</p></div> 
<div class="section " id="section0"> 
    <h1>Hi</h1> 
    <p>Hihi</p> 
</div> 
<div class="section" id="section1"> 
    <div class="slide"> 
     <div class="intro"> 
      <h1>Hi</h1> 
      <p>Hihi</p> 
     </div> 
    </div> 
    <div class="slide"> 
     <div class="intro"> 

      <h1>Simple</h1> 
      <p>Hihi</p> 
     </div> 
    </div> 
    <div class="slide"> 
     <div class="intro"> 
      <h1>Hey</h1> 
      <p>Hihi</p> 
     </div> 
    </div> 
    <div class="slide"> 
     <div class="intro"> 
      <h1>Heyhey</h1> 
      <p>Hihi</p> 
     </div> 
    </div> 
</div> 
<div class="section" id="section2"> 
    <div class="intro"> 
     <h1>Hi</h1> 
     <p>Hihi</p> 
    </div> 
</div> 
<div class="section" id="section3"> 
    <div class="intro"> 
     <h1>Hi</h1> 
     <p>Hihi</p> 
    </div> 
</div> 

Это мой CSS:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
    padding: 0; 
    margin: 0; 
} 

table { 
    border-spacing: 0;  
} 

ol,ul { 
    list-style: none; 
    margin:0; 
    padding:0; 
} 

body{ 
    font-family: arial,helvetica; 
    color: #000; 
    color: rgba(246,192,6,1); 
} 
.wrap{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
    position: relative; 
} 
h1{ 
    font-size: 6em; 
} 
p{ 
    font-size: 2em; 
} 
.section{ 
    text-align:center; 
} 

#1 { 
    position: fixed; 
    z-index: 70; 
    top: 10px; 
    right: 10px; 
} 

#2 { 
    position: fixed; 
    z-index: 70; 
    bottom: 10px; 
    left: 10px; 
} 

#3 { 
    position: fixed; 
    z-index: 70; 
    top: 10px; 
    left: 10px; 
} 

#4 { 
    position: fixed; 
    z-index: 70; 
    bottom: 10px; 
    right: 10px; 
} 


#menu li { 
    display:; 
    margin-top: 40px; 
    margin-bottom: 40px; 
    color: #000; 
    background:#fff; 
    background: rgba(255,255,255, 0.5); 
    width: 35%; 
    height:0; 
    padding-bottom: 35%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
} 
#menu li.active{ 
    background:#000; 
    background: rgba(255,255,255, 1); 
    color: #fff; 
} 
#menu li a{ 
    text-decoration:none; 
    color: #000; 
} 
#menu li.active a:hover{ 
    color: #000; 
} 
#menu li:hover{ 
    background: rgba(255,255,255, 0.8); 
} 
#menu li a, 
#menu li.active a{ 
    padding: 9px 18px; 
    display:block; 
} 
#menu li.active a{ 
    color: #fff; 
} 
#menu{ 
    position:fixed; 
    top:0; 
    right:0; 
    height: 40px; 
    z-index: 70; 
    width: auto; 
    padding: 0; 
    margin:0; 
} 

Вот JSFiddle demo

Answer 1

Ваш CSS не применяется "}" является отсутствует в этом правиле.

form,fieldset,input,textarea,p,blockquote,th,td { 
padding: 0; 
margin: 0; 
} 

Номера не должны использоваться в качестве идентификационной метки.

Это идеальное место для вертикального центрирования, используя полный html5 с преобразованием CSS3, который центрирует все по вертикали.

#menu { 
position:fixed; 
top:50%; 
transform:translateY(-50%); 
-webkit-transform:translateY(-50%); /* for chrome preview */ 
right:0; 
height: auto; 
z-index: 70; 
width: auto; 
padding: 0; 
margin:0; 
} 

Answer 2

Это то, что вы хотите что-то вроде this fiddle.

Я добавил границу, чтобы вы могли видеть, что ul выравнивается вправо. Вы хотите, чтобы нумерованные элементы div были частью ul. Итак, первый код теперь:

<ul id="menu"> 
    <li data-menuanchor="firstPage"><a href="#firstPage"><div id="1"><p>O</p></div></a </li> 
    <li data-menuanchor="secondPage"><a href="#secondPage"><div id="2"><p>O</p></div></a></li> 
    <li data-menuanchor="3rdPage"><a href="#3rdPage"><div id="3"><p>O</p></div></a></li> 
    <li data-menuanchor="4thpage"><a href="#4thpage"><div id="4"><p>O</p></div></a></li> 
</ul> 

Update

На самом деле, я думаю, что вы хотите что-то вроде этого: jsfiddle.

Обратите внимание на переход от p к span новый класс bulletDiv и добавление вертикального выравнивания середины:

<ul id="menu"> 
    <li data-menuanchor="firstPage"><span id="1" class="bulletDiv">O</span><a href="#firstPage">1</a></li> 
    <li data-menuanchor="secondPage"><span id="2" class="bulletDiv">O</span><a href="#secondPage">2</a></li> 
    <li data-menuanchor="3rdPage"><span id="3" class="bulletDiv">O</span><a href="#3rdPage">3</a></li> 
    <li data-menuanchor="4thpage"><span id="4" class="bulletDiv">O</span><a href="#4thpage">4</a></li> 
</ul> 

CSS:

.bulletDiv{ 
    font-size: 2em; 
    vertical-align:middle;  
} 

#menu li a{ 
    text-decoration:none; 
    color: #000; 
    vertical-align:middle; 
}