Forum : Aligner li dans ul avec hauteur variable

Bonjour à tous,

Je sais que l'alignement vertical est un soucis récurrent mais malgré des recherches et l'aide de certains collègues, je n'y arrive pas.

Je vous explique :

J'ai une div qui prend une taille variable (la taille de l'écran en gros). J'ai une liste à puces à l'interieur. 3 puces exactement.
J'ai donc mes li avec un

height: 33%;

afin que les trois puces prennent toute la hauteur de la page.

Seulement, le contenu de ces puces se positionnent en haut du conteneur et non au milieu. Je me suis dit, "Facile mec, un petit vertical-align: middle; et ce sera réglé !". Eeeeet bah nan ! Raté pour cette fois.

Je ne vous met pas de code car celui ci est vraiment basique (body > div > ul > li*3,

li{ height: 30%; }

et le reste en height: 100% en gros!).

Je vous avoue donc une fois de plus qu'un petit coup de pouce serait le bienvenue de votre part !

N'hésitez pas à me demander si il vous manque des informations ou si simplement je ne sais pas m'exprimer >_<.

Merci d'avance à tout le monde !
Cordialement,
PallMallShow.

coloo

Réponse acceptée

Bonjour

Il faut savoir que le html a une principale qualité, c'est qu'on peut facilement analyser où ça bug visuellement. En lisant ton topic, je me suis dit que tu n'es pas très habitué à faire des tests. Si tu avais mis un background-color de ta div, tu aurais pu voir qu'elle ne prend pas toute la hauteur ^^.

1) je veux avoir une div avec une w 100% et une h 100%

Il me faudrait enlever les marges et padding indésirables

margin : 0; padding : 0
Je dois déclarer les éléments parents qui sont au dessus de ma div ( html > body > div > ul > li)

html{width: 100%; height : 100%}

/!\ il faudra renseigner height 100% dans chaque balise html>body>div>ul. Cette propriété ne s'hérite pas
Si tu as bien enlever toutes les marge indésirable, tes li devrait remplir toute la page

2) :'( je veux que ça soit bien centré

Tu faisais référence au vertical-align middle. C'est très intéressant quand tu as 1 élément mais là tu as trois li :/. Je ne pense pas que ça soit la bonne solution. On va pouvoir parler de la 2eme méthode :D => les positions :D

<style>
*{margin:0; padding:0}
li{position:absolute;  
  width:500px;
  left:50%;
  margin-Left:-250px;
  padding:0;
  background:grey;
  height:100px;}
.fi {top:0}
.mi {top:50%;margin-top:-50px;}
.la {bottom:0;}
</style>
<div>
  <ul>
    <li class="fi">1</li>
    <li class="mi">2</li>
    <li class="la">3</li>
  </ul>
</div>

/!\ ça bug un chouya avec les tailles en %

A toi de faire ton choix, les marges ou les positions ;)

Wapaca

Salut,

Voici comment faire avec vertical-align middle

<style>
    li {
        display: table;
        height: 33%;
    }
    li span {
        vertical-align:middle;
        display: table-cell;
    }
</style>
<ul>
    <li>
        <span>contenu</span>
    </li>
    <li>
        <span>contenu</span>
    </li>
    <li>
        <span>contenu</span>
    </li>
</ul>

Voilà c'est aussi simple que ça d'utiliser vertical-align.

Azorgh

Auteur

Merci a vous deux pour vos réponses, c'est vrai que c'est quand même la galère dans mon cas.

J'ai donc a moitié réussi, mais je me suis porté sur une autre approche.

Merci encore, ça m'a bien quand même bien aidé dans ma réflexion ! (Et désolé pour la réponse ... tardive).

Bonne journée à tous !

Aligner li dans ul avec hauteur variable

3 réponses