La boîte flottante laisse le conteneur à court terme

Je sais que c'est une question commune, mais je n'arrive pas à la comprendre. J'ai tout essayé sauf la seule chose qui fera ce travail, y compris les différents placements et les combinaisons de paramètres de clair et de débordement. Voici mon code (dépouillé pour l'affichage)La boîte flottante laisse le conteneur à court terme

<style> 

#message  { border:thin red dashed; overflow:hidden; } 
#message p  { border:thin red solid; } 
#line1  { border:thin blue solid; } 
#text  { text-align:center; background-color:#FCF; vertical-align:middle;} 
#photo  { float:left; width:160px; border:thick black solid;} 

</style> 
</head> 

<body> 
<div id="Main"> 
     <div id="line1">    
      <div id="message" >      
       <div id="photo" >  <!-- floated pic box --> 
        Pretend a picture is here. Pretend a picture is here. 
        Pretend a picture is here. Pretend a picture is here. 
       </div> <!-- photo --> 

       <div id="text"> Click here to see all Key West Tours, Attractions and Packages<br /> 
        Buy Online and Save! 
       </div> <!-- text --> 

      </div> <!-- message --> 
     </div> <!-- line1 --> 
</div> <!-- Main -->

Je veux que le texte soit aligné milieu et se rendre compte qu'il est parce que le div texte réel (boîte rose) peut aligner milieu toute la journée et aussi longtemps qu'il reste que la hauteur ça ne changera pas. Question: Comment est-ce que mon div de texte peut atteindre la hauteur de la zone de faux image pour que je puisse l'aligner au milieu de cette section?

Source

2009-10-01 Deverill

Je viens de réaliser que j'ai dit "aligné au milieu". Au cas où ce n'est pas clair, je veux qu'il soit aligné verticalement au milieu de la boîte - c'est-à-dire au milieu de la boîte de faux image. Merci – Deverill

Il n'y a pas vraiment de bonne façon de faire ce que vous essayez de faire. Puisque vous avez votre image dans son propre div flottant vers la gauche, il est difficile d'obtenir votre div de texte pour l'aligner avec lui.

Je donnerais juste au div la marge supérieure de sorte qu'il commence au moins quelque part près du milieu de l'image, mais évidemment ce n'est pas une solution spécifique, c'est plus d'une autre option.

Si vous devez absolument avoir centré un de ces liens pourraient aider,

phrogz.net/CSS/vertical-align/index.html

webtoolkit.info/css-vertical-align.html

Sinon, vous pouvez essayer de mettre l'image et le texte ensemble une seule balise div et donnez à l'image un alignement vertical: milieu, tant qu'il n'y a pas de saut de ligne qui alignerait le texte au milieu de l'image.

Source

2009-10-01 20:55:35

Super! Le premier lien m'a mis sur la solution actuelle ... mettre le texte avec l'image et donner à l'image un attribut v-align: middle. Comme vous l'avez dit, mettre un
là-dedans, mais je vais vérifier l'autre lien et voir si je peux faire quelque chose pour le rendre parfait. Certaines choses ne sont pas censées être encore en CSS :) Merci pour les pointeurs! – Deverill

La boîte flottante laisse le conteneur à court terme

Répondre

Questions connexes