Placer des DIV dans DIV

Bonjour à tous,

j'ai un soucis pour pour placer des DIV dans une DIV à la centrer verticalement et la placer à droite.

Pour mieux comprendre je joins une image du résultat souhaité.


voici le code html et css

<div class="element-parent">
  Texte1
  <div class="a-droite">
  Texte2
  </div>
</div>

body
{
background-color: #FF0066;
margin: 0;
padding: 0;
}

.element-parent {
  position: relative;
  height: 100px;
  background-color: #2980b9;
 }
 
.a-droite{
  position: absolute;
  display: table-cell;
  vertical-align: middle;
  right: 30px;
}

j'ai essayé les changements de positions relative, absolue...
j'ai supprimé : display: table-cell; etc...
et bien d autres.
Quand j'ai le centrage vertical je n'ai plus la position à droite...(il vient se mettre a gauche)

Si quelqu un peut me mettre sur la bonne piste ça serait sympa...
je ne m'en sors plus apres les multiples essais que j'ai fait.

Merci

klorane
Modifié par klorane (28 Nov 2017 - 17:44)

Hello Klorane,

Ah là tu es dans un cas où l'utilisation de flexbox est tout à fait adaptée !
Il faut que tu appliques un display: flex; sur le parent qui contient 2 enfants (tes 2 textes). L'important est ensuite d'appliquer les bonnes propriétés justify-content et align-items.
Une explication ici : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Et voici en ligne ton cas résolu : https://codepen.io/korell/pen/wPYJrR?editors=1100

<div class="element-parent">
  <span>Texte 1</span>
  <span>Texte 2</span>
</div>

body {
  background-color: #FF0066;
  margin: 0;
  padding: 0;
}
.element-parent {
  background-color: #2980b9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 30px;
}

.element-parent span {
  background-color: white;
  line-height: 30px;
  padding: 0 1em;
  
  font-family: sans-serif;
  font-weight: bold;
}

Bonjour,

Et avant la génération flex, on utilisait ceci:

<div class="container">
  <span>Texte 1</span>
  <div class="sub-container">
    <span>Texte 2</span>
  </div>
</div>

.container {
  background-color: #2980b9;
  height:      50px;
  line-height: 50px;
  padding-left:  30px;
  padding-right: 30px;
}
.container span {
  background-color: white;
  vertical-align: middle;
}
.sub-container {
  float: right;
  text-align: right;
}
.sub-container::after {
  content: '';
  clear: both;
}

Bonne journée

Bonjour,

Et avant la génération flex, on utilisait ceci:

<div class="container">
  <span>Texte 1</span>
  <div class="sub-container">
    <span>Texte 2</span>
  </div>
</div>

.container {
  background-color: #2980b9;
  height:      50px;
  line-height: 50px;
  padding-left:  30px;
  padding-right: 30px;
}
.container span {
  background-color: white;
  vertical-align: middle;
}
.sub-container {
  float: right;
  text-align: right;
}
.sub-container::after {
  content: '';
  clear: both;
}

Bonne journée

Bonjour,

Et avant la génération flex, on utilisait ceci:

<div class="container">
  <span>Texte 1</span>
  <div class="sub-container">
    <span>Texte 2</span>
  </div>
</div>

.container {
  background-color: #2980b9;
  height:      50px;
  line-height: 50px;
  padding-left:  30px;
  padding-right: 30px;
}
.container span {
  background-color: white;
  vertical-align: middle;
}
.sub-container {
  float: right;
  text-align: right;
}
.sub-container::after {
  content: '';
  clear: both;
}

Bonne journée


Edit: Désolé pour la publication multiple
Page blanche après publication + refresh plusieurs fois conduisent à ce résultat.
Modifié par Greg_Lumiere (29 Nov 2017 - 09:34)

Greg_Lumiere a écrit :
Désolé pour la publication multiple
Page blanche après publication + refresh plusieurs fois conduisent à ce résultat.

Tout à fait. C'est un problème récurent sur le forum...