Obtenir CSS pour "flotter: droite" et verticalement centre

J'ai quelques problèmes pour centrer un petit morceau de texte en flottant à côté d'une image.Obtenir CSS pour "flotter: droite" et verticalement centre

<html> 
<head> 
<style type="text/css"> 
img 
{ 
float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<img src="logocss.gif" width="95" height="84" /> 
<div style="position:relative; top: 20px;"> 
This 
</div> 
<div> 
Other stuff... 
</body> 
</html>

(Vous pouvez copier et coller ce code dans http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float pour le voir en action.

Ce que je voudrais est un moyen de centrer verticalement le texte tout en flottant à côté de cette image. Et pas non plus gâcher (comme vous pouvez le voir, "Other Stuff ..." est en haut de "This")

Je préférerais une approche CSS pure (ou peut-être une restructuration de divs et autres) parce que c'est Juste un exemple montrant le problème.L'application dans laquelle il est utilisé est très complexe et tout ce qui va dans une table nécessiterait un peu de travail, et po ssibly ne semblerait pas juste.

MISE À JOUR

Ok, j'ai arraché une partie de ma page générée en asp.net qui montre le problème que je rencontre. Je me rends compte que le code est moche et je m'excuse. Il a été généré par la machine

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<table> 
<tr> 
<td> 
<div style="line-height:84px;"> 
<img src="logocss.gif" width="95" height="84" /> 
<span>This </span> 
</div> 
</td> 
</tr> 
</table> 
Other stuff... 
<br> 
<br> 
Actual application: 
<br> 
<div style="width:300px;"> 
    <div style="width:300px;"> 
    <input type="hidden"/> 
    <table border="0" style="border-collapse:collapse;border-spacing:1px;"> 
     <tr> 
     <td style="width:250px;"><div style="line-height: 50px;"> 
      <input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span> 
      </div></td><td style="width:350px;"><table border="0"> 
     <tr> 
     <td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td> 
     </tr><tr style="height:0px;"> 
     <td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td> 
     </tr> 
</table> 
</div> 
</div> 
</body> 
</html>

Désolé pour le gros code, mais c'est un exemple de mon problème. J'ai fait le tour de taille de ligne mais il semble n'avoir aucun effet ici. Fondamentalement, je veux que le contrôle d'édition soit centré verticalement au milieu de l'image (ce qui est facile à cause de la table) et que le texte "Email" soit centré verticalement au milieu de l'image. Je ne peux pas le faire fonctionner dans cet arrangement. Qu'est-ce que je fais mal?

Source

2009-11-19 Earlz

Eh bien, je ne sais pas où ils sont allés. Mais quelqu'un a fait un post à propos de 'padding-top' qui est exactement ce dont j'avais besoin .. Vous pouvez restaurer ce post parce qu'il m'a aidé, sauf pour le centre d'alignement de texte. En fait, je le créditerais comme la réponse. – Earlz

Que pensez-vous de cela? (Notez que la valeur ligne hauteur est égale à la hauteur de l'image):

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<div style="text-align:right;line-height:84px;"> 
<img src="logocss.gif" width="95" height="84" /> 
This 
</div> 

Other stuff... 
</body> 
</html>

MISE À JOUR:

Vu le code mis à jour, je suis venu avec ceci:

<div style="width:300px;"> 
    <div style="width:300px;"> 
    <input type="hidden"/> 
    <table border="0" style="border-collapse:collapse;border-spacing:1px;"> 
     <tr> 
     <td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;"> 
      <input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email 
      </div></td><td style="width:350px;"><table border="0"> 
     <tr> 
     <td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td> 
     </tr><tr style="height:0px;"> 
     <td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td> 
     </tr> 
</table> 
</div> 
</div>

Je suis Je ne dis pas que c'est la meilleure façon de le faire, mais j'ai essayé de ne pas trop modifier votre code. Vous n'avez pas besoin d'envelopper le texte dans une durée à mon avis.

Si vous voulez coller à l'aide de tables, essayez regardant la propriété valign = « middle » de l'élément td: http://www.w3schools.com/TAGS/att_td_valign.asp Mais si vous voulez le faire, vous devrez séparer l'image du texte et les mettre dans différents tds.

Source

2009-11-19 21:55:30

Cela ressemble exactement à ce dont j'ai besoin .. mais j'ai du mal à le faire fonctionner dans mon application actuelle maintenant .. Je laisserai cette question ouverte jusqu'à ce que je la comprenne. (Cela aurait-il des problèmes à l'intérieur d'un ?) – Earlz

S'il vous plaît voir ma question mise à jour. Peut-être que vous pouvez m'aider – Earlz

Jetez un oeil à ma réponse mise à jour. J'espère que ça aide. –

Cela pourrait être ce que vous cherchez.

Je pense que vous voulez dire que vous voulez l'image sur le côté droit de la DIV. Le flotteur à droite le placera à l'extrémité droite du conteneur. Qui n'a pas de taille, à savoir. tout l'écran.

<html> 
<head> 
<style type="text/css"> 
img 
{ 
float:left; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the  image  will float to the right in the paragraph.</p> 
<div> 

<div style=" top: 20px;float:left;"> 
This 
</div><img src="logocss.gif" width="95" height="84" /> 
</div> 
Other stuff... 

</body> 
</html>

Source

2009-11-19 21:36:35 Glennular

Cela corrige une partie de celui-ci. Mais je veux que "Ceci" soit centré de façon à ce qu'il soit centré verticalement à côté de l'image pour qu'il soit au milieu de l'image. (Verticalement) – Earlz

Solution légèrement différente de celle de Glennular. Je ne suis pas entièrement sûr de la façon dont vous voulez faire cela, mais le centre suit le texte Ceci ..., fait flotter l'image à sa droite (et il envelopperait le texte s'il s'étend à l'image) et met le D'autres choses ... ci-dessous.

<html> 
<head> 
<style type="text/css"> 
img 
{ 
    float:right; 
} 
</style> 
</head> 
<body> 
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> 
<div> 
<div style="position:relative; top: 20px; text-align:center;"> 
<img src="logocss.gif" width="95" height="84" /> 
This 
</div> 
<div style="clear:right;"> 
Other stuff... 
</body> 
</html>

Source

2009-11-19 21:40:53 Pascal

Je le veux verticalement centré, pas horizontalement. mais le "clair: droit"; est quelque chose dont j'avais besoin :) – Earlz

Oh, snap, aurait dû payer plus d'attention, désolé. :) – Pascal

Obtenir CSS pour "flotter: droite" et verticalement centre

Répondre

Questions connexes