The :
HOME
ABOUT
PROJECTS
CAREER
SERVICES

have refused to align to the middle vertically after all my tricks in CSS. How do I make them align vertically to the middle?

Put all the list item in a div, then align the div to the center.

Or better still write a class for the div, and center align the text or li items.



Contact:

Mobile: 08133884165

Whatsapp: 08133884165

BBM: 2BB63350

Contact webpage: http://www.1st-website design.com

Am an expert website developer skilled in web languages such as:
HTML/HTML5, CSS/CSS3, PHP, MYSQL, JAVASCRIPT/JQUERY, JQUERYMOBILE, BOOTSRAP AND AJAX.

Also an expert in using content management systems (CMS) such as : WORDPRESS, JOOMLA, DRUPAL, PULSE CMS, BLOGGER and WHMCS.

And Ecommerce platforms such as : OPENCART, MAGENTO and SHOPIFY.

Also add left and right padding and margin to the div, so there align to the center properly.

why not show us the css and html of that menu. It appears you gave the parent container a fixed height.
If that is the case, you have to give the container containing the elements a line-height property. That line-height must get the value of the height of the parent container to make vertical alignment possible.
However, if you did that, its a wrong way of going about it you do not need to give them specific height, just use padding to get it to the height you want.
For example below is a simple horizontal navigation that has a black background and the links background changes to white on hover. Notice I did not use any height.
CSS

nav{
display:block;
background-color:#000;
}
nav ul{
list-style-type:none;
display:block;
}
nav ul li{
display:inline-block;
text-align:center;
}
nav ul li a{
display:block;
padding: 6px 10px;
text-decoration:none;
color:#fff;
}
nav ul li a:hover{
background-color:#fff;
color:#000;
}

HTML

<nav>
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">About </a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

This is a very simple horizontal navigation that will fit the space in the pic you uploaded. To adjust the height of the navigation, just tinker with the padding in the nav ul li a{} block.

also when given the height and width of the div which contains the ul and li items, use percentage % in their css for better aligning in all window sizes...

Wow thanks guys I will apply this right now. I was even hoping to use JavaScript and apply mouseover and mouseleave event handlers to create some effects on the tab, when the user hovers his mouse around the nav element. But the hover you gave is it compatible cross platform more than the JavaScript event handler?

onyengbu:
why not show us the css and html of that menu. It appears you gave the parent container a fixed height.
If that is the case, you have to give the container containing the elements a line-height property. That line-height must get the value of the height of the parent container to make vertical alignment possible.
However, if you did that, its a wrong way of going about it you do not need to give them specific height, just use padding to get it to the height you want.
For example below is a simple horizontal navigation that has a black background and the links background changes to white on hover. Notice I did not use any height.
CSS

nav{
display:block;
background-color:#000;
}
nav ul{
list-style-type:none;
display:block;
}
nav ul li{
display:inline-block;
text-align:center;
}
nav ul li a{
display:block;
padding: 6px 10px;
text-decoration:none;
color:#fff;
}
nav ul li a:hover{
background-color:#fff;
color:#000;
}

HTML

<nav>
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">About </a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

This is a very simple horizontal navigation that will fit the space in the pic you uploaded. To adjust the height of the navigation, just tinker with the padding in the nav ul li a{} block.

AkunneObinna:
Wow thanks guys I will apply this right now. I was even hoping to use JavaScript and apply mouseover and mouseleave event handlers to create some effects on the tab, when the user hovers his mouse around the nav element. But the hover you gave is it compatible cross platform more than the JavaScript event handler?

It is compatible cross-browser.....

Css3 is really powerful... You don't need javascript in many areas of your website if you tap into the power of css fully...

AkunneObinna:
Wow thanks guys I will apply this right now. I was even hoping to use JavaScript and apply mouseover and mouseleave event handlers to create some effects on the tab, when the user hovers his mouse around the nav element. But the hover you gave is it compatible cross platform more than the JavaScript event handler?

Yes it is just the normal hover event you can give to any element so its cross platform except for opera mini which you know is operating on a different level altogether.
Now, if the effects you are talking about is drop down menu, you still can do that purely with css only. Javascript is only required to cover for some mobile browser like opera mini and uc browser which doesnt deal well with hover events.
Let me know if you want the navigation above to drop down for sub menus on hover.

onyengbu:

Yes it is just the normal hover event you can give to any element so its cross platform except for opera mini which you know is operating on a different level altogether.
Now, if the effects you are talking about is drop down menu, you still can do that purely with css only. Javascript is only required to cover for some mobile browser like opera mini and uc browser which doesnt deal well with hover events.
Let me know if you want the navigation above to drop down for sub menus on hover.

Thanks a million. I will get back to you if i need it. I just discovered there is a whole world of CSS I am yet to explore.

I will start my journey on CSS3.

Dmayor7:


It is compatible cross-browser.....

Css3 is really powerful... You don't need javascript in many areas of your website if you tap into the power of css fully...