Vertically align text and button

HTML & CSS
1

I need help to make the text and the button aligned vertically center, in IE 7 and IE8. Below is my code, it’s not looking good in IE7 and IE8

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.wrap{
	width: 400px;
	border:solid 1px #CCC;
	height: 400px;
}
.cl {
	clear: both;
}
.fl {
	float: left;
}
.fr{
	float: right;
}
ul, li {
	padding: 0;
	margin:0;
}
li {
	background:#5CAFFB;
	display: block;
	margin-bottom: 3px;
	list-style-type: none;
}
</style>
</head>

<body>
	<div class="wrap">
		<ul>
			<li>
				<span class="fl">fb_564297246</span>
				<span class="fr">
					<span>13 pts</span>
					<button type="button" class="brag">Brag</button>
					<button type="button" class="challenge">Challenge</button>
				</span>
				<div class="cl"></div>
			</li>
			<li>
				<span class="fl">fb_564297246</span>
				<span class="fr">
				<span>13 pts</span>
					<button type="button" class="brag">Brag</button>
					<button type="button" class="challenge">Challenge</button>
				</span>
				<div class="cl"></div>
			</li>
			<li>
				<span class="fl">fb_564297246</span>
				<span class="fr">
					<span>13 pts</span>
					<button type="button" class="brag">Brag</button>
					<button type="button" class="challenge">Challenge</button>
				</span>
				<div class="cl"></div>
			</li>
		</ul>
	</div>
</body>

</html>
2

Try


span,button{vertical-align:middle}

Of course make it specific to your example.

3

Also remove those clearing divs and use this instead.


li {
    background:#5CAFFB;
    display: block;
    margin-bottom: 3px;
    list-style-type: none;
   [B] width:100%;
    overflow:hidden;[/B]
}
4

it’s looking good now :slight_smile: thanks