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;
}

不应将数字用作ID标记。

这是使用完整的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>

<强>更新

实际上，我认为你想要的是这样的： jsfiddle 。

请注意新p的{{1}}到span的更改以及垂直对齐中间的添加：

bulletDiv

CSS：

<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>

在响应式布局中垂直对齐ul

2 个答案: