Problème placement image/texte

Sujet résolu

23 mai 2019 à 18:16:52

Bonsoir,

Donc voilà mon souci, sur mon site, je cherche à mettre une image ainsi qu'un texte centrer dans la page; mais je souhaite que le texte sois à droite de l'image et non en dessous, pour celui-ci, vous me direz que j'ai juste à faire un float, mais lorsque je le fais, mon image est a gauche et mon texte centré (voir image ci-dessous) donc je voudrais savoir si c'était possible de centrer l'image ainsi que le texte afin que ces derniers soient conjoints et qu'il n'y es pas de marge.

Je vous met mon code html ainsi que mon css ci-dessous ainsi que le résultat sur mon site pour l'instant.

Merci de vos futurs réponses.

exen

23 mai 2019 à 19:15:39

Bonjour,

Tu fait u ensemble header et dedans tu va créer une div assez large pour contenir texte et image.

dans ce genre.

     <header>
     	<div class="b1">
	     	<h1>PC ou Mac</h1>
	     	<img class="im1" src="../assets/img/b1.png">
     	</div>
     </header>

ton header (qui peut aussi être une div avec une class) tu lui dit tu centre avec plex, et on dit la même chose à la div

     .b1{
     	width: 500px;
     	height: auto;
     	display: flex;
	 	justify-content: space-around;
	 	align-items: center;
     }

     .im1{
     	width: 150px;
     	height: auto;
     }
	 header{
	 	display: flex;
	 	justify-content: space-around;
	 }

Compos sui.

Sand Wraith

23 mai 2019 à 19:17:52

Salut,

Et oui bien-sur que c'est possible, et il est possible de faire sa avec plusieurs méthodes... la meilleure solution et la plus simple a mon avis est de créer une grande div qui va contenir des d'autre div et chaque div contiendra une image et du texte... c'est plus facile a comprendre avec un exemple:

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">	
		<title>title</title>
		<link rel="stylesheet" href="test.css">
	</head>
	<body>
		<div class="center">
			<div class="profile1">
				<img class="image" src="image.jpg"></a>
				<p>
					un texte<br>
					un autre texte<br>
					et encore ...<br>
				</p>
			</div>
		</div>
	</body>
</html>

EnzoContadini

23 mai 2019 à 19:29:14

Merci à tout deux pour vos réponses, j'ai opté pour la solution d'Exen n'ayant pas le code css pour ta solution Sand Wraith, après je voudrais que le texte soit à droite de l'image et non à gauche Exen, y'a un moyen de le faire passer de l'autre côté ?

Encore merci de vos réponses.

Sand Wraith

23 mai 2019 à 19:37:20

Hah, ouai désole je l'ai completment oublié se code je suis désolé... pour ce qui est de passer le texte a droite faut simplement prendre la balise <h></h> et la mettre en dessous de la balise <img/>...

exen

23 mai 2019 à 19:40:13

De toute façon je suppose que le css est sensiblement le même on a une <div> qui contiens ton ensemble, après si ce n'est pas un titre<p> serrait peut-être plus indiqué

Compos sui.

EnzoContadini

23 mai 2019 à 19:42:20

Yeah ! Super !

Vraiment merci de votre aide, car je n'ai pas encore assez de connaissance pour les <header>^^

Grâce à vous y'a de l'avancement ;).

Bonne soirée !