comment puis-je centrer verticalement une travée dans un div?

Je voudrais vraiment cela et j'ai essayé pendant des heures, je l'ai centré horizontalement dans le div mais juste besoin de le centrer verticalement maintenant ..comment puis-je centrer verticalement une travée dans un div?

Ceci est mon code CSS pour l'envergure qui est centré horizontalement dans un div.

.titl { 

    font-family:serif; 

    text-align:center; 

    font-size:35px; 
    font-weight: bolder; 

    color:#FFFFFF; 

    padding-top:1cm; 
     text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */ 
    -moz-text-shadow: 0 0 2px #000; 
    -webkit-text-shadow: 0 0 2px #000; 

    }

C'est le html du code div:

<div class="wrapper"> 

<div id="Production" class="orange" style="cursor:wait"> 

    <div id="incidentsList"> 

     <span class="titl">Production</span> 


    </div> 
</div> 





<div id="Infrastructure" class="red" style="cursor:wait"> 

    <div id="requestsList"> 
<span class="titl">Infrastructure</span> 

    </div> 
</div> 





<div id="QA" class="green" style="cursor:wait"> 

    <div id="approvalsList"> 
<span class="titl">QA</span> 

    </div> 


</div> 

</div>

Le code CSS pour la etc orange et rouge est ci-dessous:

.orange { 
    background-image: url('../images/nFinal.jpg'); 
    background-position: bottom; 
    background-repeat: no-repeat; 
    height: 120px; 
    width: 224px; 
    position: relative; 
    float: left; 
    margin-top: 2px; 
    TEXT-ALIGN: center; 
}

EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT EDIT * * ** * ** * ** * ** * ** * J'ai essayé ce que @ Dan vous avez dit, mais il ne marchait pas. HTML:

<div id="Productiond"> 

      <span class="titl">text</span> 


    </div>

CSS:

#Productiond {height: 50px} 




.titl { 

    font-family:serif; 

    text-align:center; 

    font-size:35px; 
    font-weight: bolder; 

    color:#FFFFFF; 

    padding-top:1cm; 
     text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */ 
    -moz-text-shadow: 0 0 2px #000; 
    -webkit-text-shadow: 0 0 2px #000; 
    height: 50px; 
    line-height: 50px; 
    }

Source

2011-08-31 Bulvak

Pour ne pas paraître morveux, mais cela a été demandé quelques centaines de fois - regardez http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ pour quelques approches. – Blazemonger

J'ai essayé sur Google et quelques threads j'ai lu des gens mal compris et aidé à aligner horizontalement et d'autres ont dit que ce n'était pas possible. Je connais le centrage d'un div à l'intérieur d'un div mais je ne trouve même pas sur le centrage d'un span verticalement et horizontalement dans un div PS: le lien que vous avez posté est de centrer un div horizontal et vertical.Cependant, il ne parle pas de centrer un div à l'intérieur d'un div – Bulvak

Voici un exemple de travail de mon exemple ci-dessous: http://jsfiddle.net/2qnHu/ – Dan

Vous pourriez essayer de régler la hauteur de la travée .titl pour correspondre à la hauteur de la balise div enfermant. puis en définissant le line-height de l'intervalle .titl pour faire correspondre cela aussi bien. cela fonctionnerait selon le contexte que vous utilisez dans

Essayez ceci pour un exemple.

HTML:

<div id='Request'> 
<span class='titl'>Test Message</span> 
</div>

CSS:

#Request {height: 50px} 
.titl {height: 50px; line-height: 50px}

Cela affichera alors la titre "Test Message" centré verticalement à l'intérieur de la Div contenant.

Source

2011-08-31 14:36:33 Dan

Voici un JS Fiddle de travail: http://jsfiddle.net/2qnHu/ – Dan

cela n'a pas fonctionné pour moi ne sais pas pourquoi mais je l'ai fonctionné en ajoutant 2
.... Puisque votre exemple fonctionne dans le violon et serait probablement utile pour quelqu'un d'autre je pense que c'est considéré comme une réponse :) – Bulvak

D'abord, je recommande la suppression des padding, height et line-height déclarations de .titl. Ensuite, je voudrais spécifier vertical-align: middle sur .titl. vertical-align est destiné aux éléments en ligne et span s sont des éléments en ligne. Ainsi, vous pouvez utiliser vertical-align. Cela dit, je n'ai pas réussi à dupliquer votre problème lorsque vous l'avez essayé sur JSFiddle et JSBin. Si cela ne résout pas votre problème, je recommanderais d'afficher un lien vers l'un ou l'autre.

Source

2011-08-31 15:19:42

comment puis-je centrer verticalement une travée dans un div?

Répondre

Questions connexes