Hello have following strange issue, can vertical center the menu text if it's one line, but 2 lines it will messed up my design. In every browser it looks different. It must also be browser compatible. Someone have an Idea?
here a online version:
HTML:
<ul id="vert-menu">
<li><a href="#">Organisatie</a></li>
<li><a href="#">Feiten en cijfers</a></li>
<li><a href="#">Historie</a></li>
<li><a href="#">Kennis & ontwikkeling</a></li>
<li><a href="#">Maatschappelijk betrokken</a></li>
<li><a href="#">Help mee</a></li>
<li><a href="#">Samenwerking in de zorg</a></li>
<li><a href="#" class="active">Samen leven, samen werken</a>
<ul class="sub-menu">
<li><a href="#">Samen leven, samen werken</a></li>
<li><a href="#">Catering en horeca</a></li>
<li><a href="#">Kunst en cadeaus</a></li>
<li><a href="#">Lenen en spelen</a></li>
<li><a href="#">Maken en doen</a></li>
<li><a href="#">Recreatie</a></li>
</ul>
</li>
<li><a href="#">Medezeggenschap</a></li>
<li><a href="#">Publicaties</a></li>
</ul>
CSS:
/* verticaal menu */
#vert-menu {
margin: 0;
padding: 0;
}
#vert-menu ul {
margin: 0;
padding: 0;
list-style:none;
}
#vert-menu > li {
margin-bottom: 5px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
width: 175px;
line-height: 30px;
font-size: 0.9em;
background:#FFF url(../images/vert-menu.jpg) no-repeat;
}
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: block;
height: 30px;
line-height: 15px;
vertical-align:middle;
color: #FFF;
text-decoration:none;
outline:none;
}
#vert-menu > li:hover > a {
background:#FFF url(../images/vert-menu-active.jpg) no-repeat;
text-decoration:none;
}
#vert-menu > li > a.active {
background:#FFF url(../images/vert-menu-active.jpg) no-repeat;
text-decoration:none;
}
#vert-menu li > .sub-menu {
margin:0;
padding: 0 5px 0 5px;
}
#vert-menu li > .sub-menu > li a {
display:block;
line-height: 20px;
width: 165px;
text-transform: lowercase;
color: #83B810;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #83B810;
text-decoration:none;
outline: none;
}
#vert-menu > li > .sub-menu > li:hover > a {
color: #750D68;
text-decoration:none;
}
#vert-menu > li > .sub-menu > li > a.active {
color: #750D68;
text-decoration:none;
}
Make it appear like a table cell:
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: table-cell;
height: 30px;
line-height: 15px;
vertical-align: middle;
color: #FFF;
text-decoration: none;
outline: none;
}
Here is the solution for this problem:
http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
Hope this help you all
I think the following modification does what you want:
#vert-menu > li > a {
padding: 0 35px 0 5px;
display: block;
height: 30px;
line-height: 15px;
vertical-align:middle;
color: #FFF;
text-decoration:none;
text-align: center;
}
I added text-align:center
.
But personally I prefer the left aligned version.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.