Another way to change the direction of alignment of the menu items without changing their order in HTML is to change:
Code:
.menu li {float:left|right;}
to:
Code:
.menu li {display:inline-block;}
FYI:the direction of menu item alignment is inherited from:
Code:
.menu {text-align:right}
There is one more nuance that is only noticable at very narrow window widths and when menu items contain multiple words.
The alignment of the text within the menu item is set in .menu li a {}. To change that behavior from left justify to right justify, change:
Code:
.menu li a {text-align:left;}
to:
Code:
.menu li a {text-align:right;}
The attached screen shot demonstrates this behavior I'm referring to.
Attachment 61374
Off Topic:
Edit: sorry Ralph, I didn't turn the page and see yours and the OP's exchanges before posting this.
May as well add the current version:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?953882-Vertically-align-text-in-responsive-css-menu-%28with-a-logo-on-right%29
Thread: Vertically align text in responsive css menu (with a logo on right)
2013.01.14 09:34
ninostar
Tested in IE 8 & 9, Firefox 18 and Chrome 24
-->
<head>
<title>Sliding Menu Items 3</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
.header {
outline:1px solid #00f;
width:90%;
display:table;
table-layout:fixed;
vertical-align:middle;
margin:0 auto;
}
.logo {
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #0ff;
width:200px;
}
h1 {
background-color:#ddd;
width:200px;
padding:.4em 0 .6em;
margin:0;
}
.menu {
display:table-cell;
text-align:right;
vertical-align:middle;
padding:0 10px;
}
.menu ul {
list-style-type:none;
display:inline-block;
border:1px solid #f00;
padding:0;
margin:0;
}
.menu li {
border:1px solid #0f0;
/* float:left; */
display:inline-block;
padding:0;
margin:0;
}
.menu li a {
display:block;
text-align:left;
font:1em Georgia,serif;
padding:.25em .6em;
margin:0;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><h1>Logo</h1></div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">OUR SERVICES</a></li>
<li><a href="#">ORDER NOW</a></li>
<li><a href="#">MEET OUR TEAM</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
</body>
</html>
