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

Posted 2023-03-05

【中文标题】响应式布局中ul的垂直对齐

【英文标题】：Vertical alignment of ul in responsive layout

【发布时间】：2014-02-08 04:34:32

【问题描述】：

我整天都在努力使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

【问题讨论】：

这不是答案：你的代码有问题：首先检查你是否已经关闭了一个 div 标签

最好提供小提琴

感谢小提琴哈希姆！我想我想要的是垂直居中我的ul。

我认为您不想对齐#menu。它已经在右边了。请参阅此小提琴更新中的框：jsfiddle.net/C55wX/1。你想在#menu之后对齐div中的0吗？这些根本不是#menu 的一部分。

【参考方案1】：

您的 CSS 未应用此规则中缺少“”。

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

数字不应用作 ID 标签。

这是使用带有 CSS3 转换的完整 html5 进行垂直居中的理想场所，这将使任何东西垂​​直居中。

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

【讨论】：

如果元素有特定的height，最好使用负边距而不是transform:translateY

@MohammadMasoudian 通常是的，但在这种情况下（参见 jsfiddle），他使用的是 position:fixed，其工作方式类似于 position:absolute 和 margin-top:-20px;没有以 top:50% 为中心。垂直对齐对于所有不同的显示和位置类型可能是一个真正的痛苦，一旦它在所有浏览器中得到完全支持，转换将解决这些问题。但是，IE8 将伴随我们一段时间。移动设备的伟大之处在于它们支持它。

【参考方案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 到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;