center push right
I need to center a piece of text "main" with another piece of text "sub" sticking out to the right. I don't want both to be centered. Center "main", with "sub" on the right. It doesn't need to work in IE6. I've got it working, but the bottoms of the text don't line up right. I applied the style bottom:.2em and that got it working. But I want to know if there is a more logical way of aligning the bottoms of the text. You can fiddle with it here link text
Update: How can I get rid of the padding around "main" and "sub"? that might help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
<div class="container">
<开发者_开发问答;div class="main">
Main
<div class="sub"> (Sub)</div>
</div>
</div>
</body>
</html>
put 3 divs
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.left{
float:left;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
float:left;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
float:left;
}<div class="container">
<div style="float:left">
</div>
<div class="main">
Main
</div>
<div class="sub"> (Sub)</div>
</div>add float:left in each divs.
加载中,请稍侯......
精彩评论