Trouble Aligning Div

Le texte 'Step 1' ne se centre pas sur l'image, peu importe ce que je mets en marge. Je n'ai pas où télécharger atm mais heres une capture d'écran: http://i.imgur.com/fWrQp.png Trouble Aligning Div

Je veux que le texte s'aligne avec le centre de l'image.

Des suggestions?

<!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" media="screen"> 
/*<![CDATA[*/ 
    <!-- 


    div.basic{ 
     margin-left: auto ; 
     margin-right: auto ; 
     border-style:solid; 
     width:750px; 
    } 

    div.top-level { 
     /*background-color: #FBEC5D;*/ 
     border-style:solid; 
     border-color:#0000FF; 
     margin: 20px 20px 0px 20px; 
     background: url(light_pink_bg.gif) repeat-y 9px; 
    } 

    div.content{ 
     background-color: #EEEEEE; 
     border-style: dotted; 
     margin: 5px 5px 5px 48px; 
    } 

    .arrow_down 
    { 
     background: url(arrow_down.gif) no-repeat 32px 0; 
     height: 17px; 
    } 

    .top-header 
    { 
     display: inline; 
     margin: 0px 0px 30px 25px; 
    } 

    .top-text 
    { 
     display: inline; 
     margin: 0px 0px 50px 0px; 

    } 

    .step-number 
    { 
     display: inline; 
     height:100%; 
    } 


    .active_cnt 
    { 
     background: url(light_pink_bg.gif) repeat-y 9px; 
    } 



    --> 
    /*]]>*/ 
    </style> 

    <title></title> 
    </head> 
    <body> 

    <div class="basic"> 
     <div class="top-level"> 
     <div class="step-number"> 
      <img src="1.png" alt ="1" height="45px" width="45px" /> 
     </div> 

     <div class="top-text">Step 1</div> 
     <div class="content"> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /> 
      Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br /> 
      Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br /> 
      Proin id sapien nec risus congue malesuada vitae ut lorem.<br /> 
      Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl. 
      </p> 
     </div> 
     </div> 
     <div class="arrow_down"> 
       
     </div> 
    </div> 
    </body> 
</html>

Source

2010-02-19 jriggs

Je ne comprends pas. Parlez-vous de l'image sur la gauche qui a le 1 et la flèche vers le bas rose? – Catfish

Est-ce obtenir l'effet que vous êtes après

.top-text 
    { 
     /*display: inline; 
     margin: 0px 0px 50px 0px;*/ 
     margin:auto; 
     text-align:center; 

    }

Ou, si je l'ai lu d'une manière différente vous pourriez dire ceci:

.top-text 
    { 
     display: inline; 
    position:relative; 
    float:left; 
    margin-top:5px; 
    } 

.step-number img 
    { 
     float:left; 
     height:100%; 
    } 

div.content{ 
     background-color: #EEEEEE; 
     border-style: dotted; 
     margin: 55px 5px 5px 48px; 
    }

Vous pourriez avoir besoin de jouer avec les marge dans div.content pour obtenir l'espacement supérieur que vous voulez.

Source

2010-02-19 18:44:04 MrChrister

Non désolé, il semble que la div qui contient l'image est seulement aussi grande que le texte est (pas la hauteur totale de l'image), et la div 'étape 1' est alignée avec cela. Serait-il utile si je télécharge le fichier 1.png afin que vous puissiez le voir localement? Je veux que le texte s'aligne avec le centre de l'image – jriggs

Ce serait cool si vous pouviez télécharger une maquette de ce que vous recherchez – MrChrister

Comment y arriver - Je veux que le texte soit à droite de l'image et centré verticalement dessus. Retrait de la ligne et ajout de la classe d'image m'a assez proche. – jriggs

Trouble Aligning Div

Répondre

Questions connexes