वर्टिकल संरेखण अनॉर्डर्ड सूची एनवी लिंक? - एचटीएमएल, सीएसएस, एचटीएमएल-सूचियां, संरेखण

मैं देखता हूं कि यह प्रश्न कई बार पूछा गया है लेकिन मुझे लगता है कि मेरा मामला थोड़ा अलग है।

जिस साइट पर मैं काम कर रहा हूं, उसके लिए नेविगेशन का निर्माण एक अनियंत्रित सूची के साथ किया गया है जैसे:

<div class="nav_root nav_area_top">
<ul class="nav_root_wrap">
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Locations
</a>
</li>
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Health Services
</a>
</li>
</ul>
</div>

...

.nav_area_top ul.nav_root_wrap > li
{
background-image: url(../images/vert_bg_blue.jpg);
background-color: #0C83BB;
padding: 4px 15px 4px 15px;
float: left;
font-size: 13px;
margin-left: 3px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
min-height: 36px;
text-align: center;
border: 0px;
}
.nav_area_top ul.nav_root_wrap > li > a
{
color:#fff;
padding: 0px;
line-height: 18px;
}

जिसका प्रतिपादन है:

जैसा कि आप देख सकते हैं कि कुछ नौ आइटम एक लाइन के हैं और कुछ दो हैं।

क्या यह मेरे लिए ऊर्ध्वाधर-संरेखित करना संभव है: एक पंक्ति वस्तुओं के बीच में?

उत्तर:

इस शैली को जोड़ें (यदि आवश्यक हो तो ओवरराइड करें)

.nav_area_top ul.nav_root_wrap > li {
line-height: 36px;
}

.nav_area_top ul.nav_root_wrap > li > a {
line-height: normal; /* or just choose another value: e.g. 1.5; */
vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
}

पिछले दो गुण इनलाइन हैक के लिए आवश्यक हैं IE<8 ठीक से प्रस्तुत करना inline-blocks तत्त्व

यह आपके लिए एक निश्चित ऊंचाई के बिना कठिन है <li>। यदि आपके पास एक निश्चित ऊंचाई है, तो आप कर सकते हैं:

<style>
#centerMe{
line-height:4em
}
</style>

<p id="centerMe">
This line is vertically centered!
</p>

आपने अपनी पसंद के अनुसार लाइन की ऊँचाई निर्धारित की।

मैंने भी इससे देखा नीक्स टू गीक्स:

#container li{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:28px;
}

मैंने बदल दिया p तत्व li; यह अभी भी काम करना चाहिए।