Điều hướng sẽ không căn chỉnh theo chiều dọc

Question

Tôi đã cố gắng căn chỉnh theo chiều dọc trên menu điều hướng của mình. Tôi đã thử display:table-cell; vertical-align: middle;, nhưng nó sẽ không. Tôi không muốn áp dụng padding-top or margin top. Tôi làm cách nào để quản lý việc này?

fiddle My https://jsfiddle.net/Tokyo/27kquzm3/

Answer 1

Bạn phải từ bỏ display:table đến ul và loại bỏ float:left; và sau đó cung cấp cho display:table-cell;vertical-align:middle; tới phần tử li.

#cssmenu > ul > li { 
    display: table-cell; 
vertical-align: middle; 
} 

#cssmenu ul 
{ 
    display: table; 
    height: 100%; 
} 

Jsfiddle

Answer 2

#cssmenu{ 
width:100%; 
padding-top:13px; 
} 

Hãy thử nó ra.

Answer 3

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu ul li, 
 
#cssmenu ul li a, 
 
#cssmenu #menu-button { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    list-style: none; 
 
    line-height: 1; 
 
    display: block; 
 
    position: relative; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#cssmenu:after, 
 
#cssmenu > ul:after { 
 
    content: "."; 
 
    display: block; 
 
    clear: both; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    height: 0; 
 
} 
 
#cssmenu #menu-button { 
 
    display: none; 
 
} 
 
#cssmenu { 
 
position: fixed; 
 
    z-index: 5; 
 
    width: 100%; 
 
    max-width: 3200px; 
 
    top:0%; 
 
    text-align: center; 
 
    height: 90px; 
 
    box-shadow: 0 0 25px rgba(0,0,0,0.9); 
 
    background-color: rgba(14, 0, 0, 0.8); 
 
} 
 

 

 
#cssmenu > ul > li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
#cssmenu ul{ 
 
width:90%; 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: table; 
 
height: 100%; 
 
} 
 

 
#cssmenu li{ 
 

 

 
} 
 

 
#cssmenu.align-center > ul { 
 
    font-size: 0; 
 
    text-align: center; 
 
    width:500px; 
 
    border: 1px solid #fff; 
 
} 
 
#cssmenu.align-center > ul > li { 
 
    display: inline-block; 
 
    float: none; 
 

 
} 
 
#cssmenu.align-center ul ul { 
 
    text-align: left; 
 
} 
 
#cssmenu.align-right > ul > li { 
 
    float: right; 
 

 
} 
 
#cssmenu > ul > li > a { 
 
    padding: 17px; 
 
    font-size: 1.2em; 
 
    letter-spacing: 1px; 
 
    text-decoration: none; 
 
    color: #dddddd; 
 
    font-weight: 700; 
 
    display:table-cell; 
 
height: 90px; 
 
vertical-align: middle; 
 

 
} 
 
#cssmenu > ul > li:hover > a { 
 
    border-top: 4px solid #cd4650; 
 
    color: #cd4650; 
 

 
} 
 
#cssmenu > ul > li.has-sub > a { 
 
    padding-right: 30px; 
 
} 
 
#cssmenu > ul > li.has-sub > a:after { 
 
    position: absolute; 
 
    top: 22px; 
 
    right: 11px; 
 
    width: 8px; 
 
    height: 2px; 
 
    display: block; 
 
    background: #dddddd; 
 
    content: ''; 
 
} 
 
#cssmenu > ul > li.has-sub > a:before { 
 
    position: absolute; 
 
    top: 19px; 
 
    right: 14px; 
 
    display: block; 
 
    width: 2px; 
 
    height: 8px; 
 
    background: #dddddd; 
 
    content: ''; 
 
    -webkit-transition: all .25s ease; 
 
    -moz-transition: all .25s ease; 
 
    -ms-transition: all .25s ease; 
 
    -o-transition: all .25s ease; 
 
    transition: all .25s ease; 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a:before { 
 
    top: 23px; 
 
    height: 0; 
 
} 
 
#cssmenu ul ul { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
#cssmenu.align-right ul ul { 
 
    text-align: right; 
 
} 
 
#cssmenu ul ul li { 
 
    height: 0; 
 
    -webkit-transition: all .25s ease; 
 
    -moz-transition: all .25s ease; 
 
    -ms-transition: all .25s ease; 
 
    -o-transition: all .25s ease; 
 
    transition: all .25s ease; 
 

 
} 
 
#cssmenu li:hover > ul { 
 
    left: auto; 
 
} 
 
#cssmenu.align-right li:hover > ul { 
 
    left: auto; 
 
    right: 0; 
 
} 
 
#cssmenu li:hover > ul > li { 
 
    height: 35px; 
 
} 
 
#cssmenu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 
#cssmenu.align-right ul ul ul { 
 
    margin-left: 0; 
 
    margin-right: 100%; 
 
} 
 

 
/*submenu*/ 
 
#cssmenu ul ul li a { 
 
    border-bottom: 1px solid rgba(150, 150, 150, 0.15); 
 
    margin-top: 15px; 
 
    padding: 11px 15px; 
 
    width: 350px; 
 
    font-size: 1em; 
 
    text-decoration: none; 
 
    color: #dddddd; 
 
    font-weight: 700; 
 
    background: rgba(29, 15, 6, 0.7); 
 
} 
 

 
#cssmenu ul ul li { 
 
    border-bottom: 1px solid rgba(150, 150, 150, 0.15); 
 
    margin-top: 15px; 
 
    
 
    
 
} 
 
#cssmenu ul ul li:last-child > a, 
 
#cssmenu ul ul li.last-item > a { 
 
    border-bottom: 0; 
 
} 
 

 
/*submenu*/ 
 
#cssmenu ul ul li:hover > a, 
 
#cssmenu ul ul li a:hover { 
 

 
    color: #cd4650; 
 
} 
 
#cssmenu ul ul li.has-sub > a:after { 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 11px; 
 
    width: 8px; 
 
    height: 2px; 
 
    display: block; 
 
    background: #dddddd; 
 
    content: ''; 
 
} 
 
#cssmenu.align-right ul ul li.has-sub > a:after { 
 
    right: auto; 
 
    left: 11px; 
 
} 
 
#cssmenu ul ul li.has-sub > a:before { 
 
    position: absolute; 
 
    top: 13px; 
 
    right: 14px; 
 
    display: block; 
 
    width: 2px; 
 
    height: 8px; 
 
    background: #dddddd; 
 
    content: ''; 
 
    -webkit-transition: all .25s ease; 
 
    -moz-transition: all .25s ease; 
 
    -ms-transition: all .25s ease; 
 
    -o-transition: all .25s ease; 
 
    transition: all .25s ease; 
 
} 
 
#cssmenu.align-right ul ul li.has-sub > a:before { 
 
    right: auto; 
 
    left: 14px; 
 
} 
 
#cssmenu ul ul > li.has-sub:hover > a:before { 
 
    top: 17px; 
 
    height: 0; 
 
}

<div id='cssmenu'> 
 
<ul> 
 
    <li><a class="first" href="#f">Home</a></li> 
 
<li><a class="introduction" href="#introduction">Intro</a></li> 
 
<li><a class="background" href="#background">Background <br>Placement </a></li> 
 
<li><a class="ira" href="#ira">illatruation & ira</a></li> 
 
<li><a class="corporate" href="#cusrporate">Corporate<br>View</a></li> 
 

 

 
      
 

 
</ul> 
 
</div>