Question

我尝试水平和垂直对齐我的列表中的顶部锚标签。 http://jsfiddle.net/Hk7HC/

但我正在做一场噩梦。此外，我在'上市优势'右侧的下拉菜单跳到了列表的顶部......唉！任何帮助将不胜感激：）

 <div id = "menu">
        <ul id="nav">
            <li class="rhombusStart">&nbsp;</li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Home</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Market <br> Update</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Membership</span></a></li>
            <li class="rhombus"><a class="rhlink" href="#"><span>FISC Info</span></a>
                <ul>
                    <li><a class="linkchild" href="#">About the FISC</a></li>
                    <li><a class="linkchild" href="#">International</a></li>
                    <li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.png" alt="&#9658;">Advantages of listing</a> 
                        <ul>
                            <li><a class="linkchild" href="#">Advantages of Listing</a></li>
                            <li><a class="linkchild" href="#">Products</a></li>
                        </ul>
                    </li>
                    <li><a class="linkchild" href ="#">Links</a></li>
                </ul>
            </li>
            <li class="rhombus"><a class="rhlink" href="#"><span>Contact Us</span></a>
                 <ul>
                    <li><a class="linkchild" href="#">About US</a></li>
                     <li><a class="linkchild" href="#">Details</a></li>
                    <li><a class="linkchild" href="#">Location</a></li>
                  </ul>
            </li>
            <li class="rhombusEnd">&nbsp;</li>
        </ul>
    </div>


/*******************************************
 Menu Styling
*******************************************/
#menu {
    margin: 0 auto;
    padding-left: 2%;
    width: 1024px;
    height: 3.5em;
    position: relative;
    top: 0;
    background-color: rgb(255,194,14);
    border: 1px solid rgb(140,51,61)
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:3.5em;
     background-color: rgb(255,194,14);
     display: table;
}

#nav ul {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     background-color: rgb(255,194,14);
}

#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited {
    display:block;
    padding:0px 5px;
    text-decoration:none;
    background: #b95d73; /* Old browsers */
    color: white;
}

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
    display: block;
    padding: 0px 5px;
    text-decoration: none;
    color: inherit;
}

#nav li.rhombus:hover {
    background: #b95d73;
    color: white;
    text-decoration: none;
}

#nav a.linkchild:hover {
   background: rgb(118,0,18);
   color: white;
}

#nav > li {
    float:left;
    position:relative;
}

#nav > li.rhombus {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 8em;
    text-align: center;
    height: 3.5em;
}
#nav > li.rhombusStart {
    float:left;
    position: relative;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(35deg);
    -moz-transform:skew(35deg);
    -ms-transform:skew(35deg);
    -o-transform:skew(35deg);
    transform:skew(35deg);
    border-right: 1px solid rgb(239,89,24);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;

}
#nav > li.rhombusEnd {
    float: left;
    position: relative;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skew(35deg);
    -moz-transform: skew(35deg);
    -ms-transform: skew(35deg);
    -o-transform: skew(35deg);
    transform: skew(35deg);
    border-left: 1px solid rgb(255,244,80);
    background-color: rgb(255,194,14);
    width: 1em;
    height: 3.5em;
}   

li.rhombus > a span {
    -webkit-transform:skew(-35deg);
    -moz-transform:skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);

    text-decoration: none;
    vertical-align: middle;
    display: table-cell;     
 }

li.rhombus > ul {
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(-35deg);
    -moz-transform:translate(0,1px) skew(-35deg);
    -ms-transform:skew(-35deg);
    -o-transform:skew(-35deg);
    transform:skew(-35deg);
}

#nav ul {
    position:absolute;
    top:3.5em;
    left:0;
    width:15em;
    display:none;
}

#nav li ul a {
    width:15em;
    float:left;
    border-bottom: 1px, solid, rgb(145,0,34);
    border-top: 1px, solid, rgb(178,77,101);
    display: block;
    line-height: 2em;
    text-align: left;
    display: table-cell; 
}

#nav ul ul {
    top:auto;
}

#nav li ul ul {
    left:15em;
    margin:0px 0 0 10px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul {
    display:none;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
    display:block;
}

img.arrow 
{
    float: right;
    vertical-align: middle;
}

Answer 1

为您的父级关卡提供与导航高度相同的line-height，使文本垂直居中。

line-height:3.5em;

在此处查看更新的jsfiddle：http://jsfiddle.net/Hk7HC/4/

另外，要修复弹出菜单，请移除top:auto并使用margin-top，如下所示：

#nav ul ul {
//removed top:auto
}

#nav li ul ul {
    left:15em;
    margin:8px 0 0 10px; //adjusted top-margin to 8px
}

查看具有垂直对齐和弹出窗口的工作示例：http://jsfiddle.net/Hk7HC/8/

Answer 2

尝试将此添加到您的锚标记：

 text-align: center;
 display: inline-block;

Answer 3

添加CSS

line-height :3.5em

中的

#nav > li.rhombus

并使用display:table-cell

替换li.rhombus > a span的{{1}}

参见工作示例： http://jsfiddle.net/rathoreahsan/Hk7HC/7/

CSS下拉菜单问题，垂直对齐

3 个答案: