html tutorial - How to align text vertically center in a DIV element using CSS - html5 - html code - html form
Answer: Use the CSS property "line-height"
If you will try to align the text within a div using the CSS rule vertical-align: middle; you won't succeed. Suppose you have a div element with the height of 50px and you have got placed some link inside the div that you want align vertically center. the simplest way to do it is — just apply the line-height property with value equal to the height of div that is 50px.
The concept behind this trick is — if the line-height value of the element is larger than the value of the font-size for the element, this difference (called the "leading") is cut in half and distributed evenly on the top and bottom of the in-line box that align the inline elements vertically center to the element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Align Text Vertically Center Using CSS - html5 - html code - html form - In 30Sec by Microsoft Award MVP - | wikitechy</title>
<style type="text/css">
.menu{
height: 20px;
line-height: 20px;
padding: 15px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">ph.no</a>
</div>
</body>
</html>