center push right

Je dois centrer un morceau de texte "main" avec un autre texte "sub" qui dépasse vers la droite. Je ne veux pas que les deux soient centrés. Centre "principal", avec "sub" sur la droite. Il n'a pas besoin de travailler dans IE6. Je l'ai fonctionné, mais les fonds du texte ne s'alignent pas correctement. J'ai appliqué le fond de style: .2em et cela a fonctionné. Mais je veux savoir s'il y a une manière plus logique d'aligner les fonds du texte. Vous pouvez jouer avec ça ici link text center push right

Mise à jour: Comment est-ce que je peux me débarrasser du rembourrage autour de "principal" et "sous"? cela pourrait aider.

<!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">&nbsp;(Sub)</div> 
    </div> 
</div> 
</body> 
</html>

Source

2009-11-09 user185383

mis 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">&nbsp;(Sub)</div> 
 
</div>

ajouter float: left dans chaque divs.

Source

2009-11-09 02:47:03 Treby

center push right

Répondre

Questions connexes