J'ai besoin d'aide et j'ai essayé presque tout ce que je sais. Ce que je suis en train de faire (et il n'a pas d'importance si je dois utiliser des tableaux sur commande pour y parvenir)Comment alignez-vous le texte verticalement à l'intérieur d'un conteneur, quel que soit le nombre de liens qu'il contient?
http: // img602.imageshack.us/img602/8769/verticalcentering .jpg
J'ai regardé en ligne et essayé plusieurs exemples, mais ils semblent tous exploser ou ne pas aligner correctement dans IE. Ce dont j'ai besoin (si c'est possible, je ne sais même plus), c'est d'avoir des liens texte qui s'aligneront verticalement dans le conteneur, qu'il y ait un seul lien ou quatre. Qu'est-ce qui se passe est que lorsque je définis la marge à 50%, il centre bien s'il n'y a qu'un seul lien là-bas, mais le reste tombera en dessous de lui ne centrant plus les liens dans le conteneur.
La chose réelle je travaille est la suivante:
J'ai un titre d'en-tête au-dessus qui s'étend sur le récipient. La rangée suivante j'ai une image sur la gauche qui est 150px par 150px - et à côté de cela j'ai un autre conteneur qui a une hauteur de 150px ainsi que c'est la hauteur maximale de ce conteneur - à l'intérieur de ce conteneur est où je voudrais mes liens pour traîner verticalement centré.
Est-ce encore possible? ou est-ce une chimère de penser qu'il fonctionnera dans IE et est compatible avec les navigateurs?
Peu importe si je dois recourir à des tables et css pour y arriver ... J'ai juste besoin d'aide car je n'ai jamais eu à centrer verticalement quoi que ce soit en fonction de son contenu avant et je peux juste Ne pas envelopper ma tête autour de la façon d'atteindre cet effet.
Toute aide serait grandement appréciée :) Merci d'avance!
Voici le CSS et HTML ci-dessous
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link"><a href="#">www.mylinkhere.com</a></p>
</div>
</div>
</body>
</html>
Pouvez-vous s'il vous plaît fournir le code qui reproduit cela dans un jsFiddle? Cela rend la résolution de ce genre de choses beaucoup plus facile. Aussi, ce que vous voulez est situé @ http://haslayout.net/css-tuts/Vertical-Centering –
poster le code que vous travaillez, de cette façon, nous ne devons pas recréer tout le HTML. – tpow
@ Meder: Je ne plaisante pas, j'espère que vous obtenez un contrat de livre bientôt avec O'Reilly ou quelqu'un. – Robusto