28172 sujets

CSS et mise en forme, CSS3

Inline-block positionnement vertical et horizontal

Bonjour

J'ai deux blocs qui doivent être alignés verticalement et alignés l'un sur la gauche et l'autre sur la droite.

<div class="wrapper">
    <div class="bloc">Bloc gauche</div>
    <div class="bloc">Bloc droite</div>

Si j'utilise des flottant , pas de problème pour l'alignement à gauche ou à droite mais pas d'alignement vertical.
j'ai donc utilisé inline-block et cela fonctionne. Et si le ttoal des largeurs des blocs fait 100% , je n'ai pas de problèmes particuliers.
Mais les deux blocs, de par leur taille ne font pas 100% et laissent un espace disponible. Si j'applique un text-align sur le wrapper, ils se retrouvent soit tous les deux à gauche ou tous les deux à droite.
Et je ne vois pas trop comment faire avec des selecteurs enfants non plus.

wrapper {
    font--size: 0;
}
.bloc {
    display: inline-block;
    vertical-align:middle;
    font-size: 1.25rem;
}
.bloc:first-child {
    margin-right: 1%;
    width: 30%;
}
.bloc:last-child {
    margin-left: 1%;
    width: 40%;
}


Cordialement
Modifié par cpalo (07 Oct 2015 - 10:02)
Pas tout à fait....
le rouge et le bleu sont alignés verticalement ( leur ligne centrale)
le premier(bleu) reste fixé au côté gauche et le second (rouge) au côté droit quelle que soit leur largeur
Modifié par cpalo (07 Oct 2015 - 11:31)
oui c'est ça;. toutes mes excuses...
alignement vertical voulait dire que la ligne centrale de chaque bloc était alignée
Bonjour,

Pourrais-tu nous fournir un petit schéma de ce que tu souhaites réaliser ?
L'idée c'était avec deux blocs, mais après je pourrai rajouter un 3° bloc qui serait lui au mileu.
upload/831-2-3-blocs-al.jpg
le vertical-align c'est déjà fait et ça fonctionne bien, que ce soit avec 2 ou 3 blocs.
Mais ce que je souhaite c'est un bloc à gauche et l'autre à droite, mais pas les deux centrés.
Bonjour,

avec flex, c'est justify-content:space-between; + align-items:center :

<div style="border: 1px solid red;margin:1em;" class="flex">
    <span style="font-size: 38px;">TEST 1</span>
    <span style="font-size: 13px;">TEST 2</span>
</div>

.flex {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:38px ; /* ? */
}

avec inline-block c'est text-align:justify + ajout d'une supplémentaire vide pour forcé l'alignement justifié de toute les lignes ...

<div style="border: 1px solid red;margin:1rem;" class="ib">
    <span style="font-size: 38px;">TEST 1</span>
    <span style="font-size: 13px;">TEST 2</span>
</div>

.ib {
  text-align:justify;
 
}
.ib span {
  vertical-align:middle;
  display:inline-block; 
}
/* extra */
.ib {
  font-size:0.01px;
}
.ib span {
  font-size:1rem;
}
.ib:after { /* trigger justify on any lines adding an extra ... empty line */
  content:'';
  display:inline-block;
  width:99%;
  vertical-align:top;
  height:0;
}


DEMO
<edit
et si tu ajoute un troisième élément, le second sera au milieu
http://codepen.io/anon/pen/WQOoNm
/>
Modifié par gc-nomade (08 Oct 2015 - 15:46)
Sujet clos
Aller à