18041 sujets

Questions générales et questions de débutants

[Résolu] Alignement horizontal et centré image et texte

Bonjour.

Voilà, j'ai un petit soucis qui me prends la tête donc je vous le présente.

J'aimerai coller deux objets, une image et un texte, l'un à coté de l'autre, et que le texte soit centré verticalement par rapport à l'image. J'arrive bien à les aligner, j'arrive bien à les centrer, mais pas les deux en même temps ><. J'ai essayer float, flexbox... Mais je bloque >< 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">

  <link rel="stylesheet" type="text/css" href="page_liminaire_css.css"/>
</head>
<body>

  <div class="Col">

    <h1 class="nomCol">Titre col</h1>

    <div class="Colbody">
      <p class="logo"> <img src="contes modernes.jpg" alt="Contes modernes" /></p>
      <p class="textCol">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor, felis vel consequat rhoncus, ipsum lorem facilisis ipsum, et posuere.</p>
    </div>
    <div class="titreColGlo">
      <p class="titreCol">Titre</p>
      <p class="auteurCol">, auteur</p>
    </div>
  </div>
</body>
</html>

.nomCol{
  font-family: sans-serif;
  color: grey;
  text-align: center;
}

.Colbody{
display: inline-block;
}

.logo img{
  width: 4%;
  float: left;
  padding: 10px;

}

.textCol{
  font-family: sans-serif;
  color:purple;
  float: right;
}

.titreColGlo{
  display: flex;
}

.titreCol{
  font-family: sans-serif;
  font-style: italic;
}

.auteurCol{
  font-family: sans-serif;
}


Pour le moment j'obtiens ceci
https://screenshotscdn.firefoxusercontent.com/images/b912a0c4-cf5a-4d76-8b3e-f3acec02cc58.png .

Merci d'avance.
Modifié par Patakess (20 Mar 2019 - 09:16)
Hello

Afin de bien comprendre le problème, le logo est censé être à gauche de 'lorem ipsum' ou 'titre, auteur' ?
Bonjour.

Alors, après moult recherche j'avais le resultat que je voulais... Sauf qu'il va falloir que je change de technique étant donné que l'endroit où j'exporte le code ne prends pas en compte le flexbox... (Ca doit donner un ebook à la fin)

https://jsfiddle.net/Papillori/mau7082t/

Le logo doit donc être à gauche des deux, mais lorem ipsum doit être centré sur le logo.
Modifié par Patakess (01 Mar 2019 - 17:43)
Re,

Je te propose ceci: https://jsfiddle.net/pj4ams1c/

Je ne sais pas si c'est exactement ce que tu recherches mais on si au moins ça peut te donner une piste. Il faut élargir la fenêtre par contre. J'ai donné au bloc "Colbody p" un display: "inline-block" puis centrer verticalement au milieu.
Re o/

C'est un bon début merci o/ Le soucis c'est que si je réduis la fenêtre en largeur, ca passe en dessous (et rip ma mise en page). Vu que c'est pour des écrans de tailles trèèèès variable, faudrait quelque chose qui puisse s'adapter. J'ai bien essayer Float mais j'ai les deux element qui se mettent l'un éloigné de l'autre. Pareil pour le titre et auteur (bon en théorie lui l'écran devrait pas rétrécir autant x))
Modifié par Patakess (01 Mar 2019 - 18:33)
On y est presque o/ Merci :3

J'ai modifié "a ma sauce" (D'ailleurs l'argument right n'était pas bien fermé, j'ai supposé qu'elle servait à rien donc je l'ai enlevé ^^")

Il manque juste un petit truc... Le coté centré verticalement du texte par rapport à l'image de gauche. J'ai l'impression que ca coince au niveau de l'overflow du colbody mais sans lui le titre et auteur se retrouve en dessous du texte (et bien entendu, le simple ajout de vertical align middle ne fonctionne pas ><)

https://jsfiddle.net/Papillori/zj64e5cy/2/
Oooh c'est pas mal et pour le moment ca semble bien passer en ebook ! Merci o/
La solution de Allan aussi passe en ebook, manque juste l’alignement middle

Une question.

.Colbody img{
  goverflow: auto;
  dfloat: left;
}


Les fautes de frappes sont volontaires ou bien c'est autre chose ?

J'ai parlé un peu vite. Il y a moyen de "fixer" element pour qu'ils soient bien les un en dessous des autres ? Parce que là elles se superposent de manière tres étranges. Par contre la solution de Allan elles se mettent bien l'une sous l'autre comme de braves petites cases
Modifié par Patakess (01 Mar 2019 - 20:46)
Bonjour Patakess,

C'est ma technique dans codepen pour annuler des propriétés par exemple dfloat n'existe pas donc pas interprétée et après j'ai oublié de les supprimer

Tu peux nous faire un une copie d'écran du résultat bugé et une maquette du résultat désiré
Dans le codepen j'ai ajouter une autre manière de faire avoir si ça passe mieux
Modifié par aliasdmc (02 Mar 2019 - 10:26)
Bonjour à vous o/

Aliasdmc: Aaah ok. C'est ce qu'il me semblait mais je n'étais pas sûr.

Le resultat que j'obtenais était le suivant
https://image.noelshack.com/fichiers/2019/09/6/1551522410-superposition.png

Et je voulais quelque chose comme ça
https://image.noelshack.com/fichiers/2019/09/6/1551522444-voulu.png

La dernière proposition de Allan semble bien fonctionner !

Du coup j'ai une question. Pourquoi avoir rajouté une div c ? Ca fait qu'il y a deux div qui encadre la même chose mais elles n'ont pas le même display (et j'ai essayé sans la c, ca fonctionnait moins bien).

Merci à vous !
Re,

En fait, il y a deux choses.
Dans le code HTML, on a utilisé des divs, qui sont des conteneurs qui sont neutres sémantiquement (contrairement à section, article, aside, etc...). Ce n'est pas si grave. Par contre, j'ai modifié leur comportement, grâce au display. Dans le CSS, j'ai utilisé les propriétés "table", "table-row"et "table-cell" qui sont les propriétés par défaut que l'on retrouve lorsque qu'on crée un tableau en HTML avec les balises "table", "tr" et "td". Cependant je ne les ai pas utilisé en HTML puisque sémantiquement ce n'est pas un tableau. On aurait pu mais il ne faut pas utiliser le HTML pour ajouter du style.

Voici le code minimum pour créer un tableau:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


Les valeurs par défauts:


table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

td {
  display: table-cell;
  vertical-align: inherit;
}

Modifié par allan00958 (02 Mar 2019 - 12:12)
Sujet clos
Aller à