Hey there, I'm currently facing a challenge with centering an image within my dropdown bar. My goal is to have it float to the right and be centered, but it's not cooperating. Here's the code snippet I'm working with:
<!DOCTYPE html>
<html>
<head>
<title>McBride-Taylor Inc.</title>
<link rel="shortcut icon" href="/Resources/img/favicon.ico"/>
<style type="text/css">
body {
margin:0;
padding:0;
background:#000000
}
.content {
background:#FFFFFF;
max-width:80%;
margin-left: auto;
margin-right: auto;
margin-top: 1.5em;
font: 80% arial;
border-radius: 5px;
}
.menu {
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
background:#FFFFFF;
height:50px;
list-style:none;
margin:0;
padding:0;
border-radius: 15px;
}
.menu > li {
float:left;
padding:0px 0px 0px 15px;
}
.menu a {
color:#000000;
display:block;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu a:hover{
background:#000000;
color:#FFFFFF;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
.menu li ul {
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px;
z-index:200;
background:#FFFFFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.menu li:hover ul {
display:block;
}
.menu li li {
display:block;
float:none;
width:200px;
}
?
</style>
</head>
<body>
<img src="/Resources/img/Header.png" width=100% style={margin:0;padding:0;}/>
<div>
<ul class="menu">
<li><a href="/index.html" >Home</a></li>
<li><a href="#" id="current">About</a>
<ul>
<li><a href="/About+Us.html">Company Info</a></li>
</ul>
</li>
<li style="float: right;"><a href="https://www.facebook.com/McBrideTaylorInc"><img src="/Resources/img/facebook.png"/></a></li>
</ul>
</div>
<div class="content">
<h2 style="text-align: center">About McBride-Taylor</h2>
</div>
</body>
</html>
If you want to take a look, I've hosted it here: . You'll notice that the image is aligned to the right but not vertically centered. I even attempted using v-align without success.
Edit: Upon closer inspection, I removed the text-align property as it wasn't making any difference.