Partage

Texte centré sur image

5 janvier 2018 à 17:32:27

Bonjour,

Dans le cadre d'un portfolio (ou assimilé), j'aimerais centrer le texte sur chaque image, mais je ne trouve pas la solution miracle.

Pour l'instant, le texte est en position:absolute, mais j'aurais aimé que le point d'accroche soit le milieu de l'image, et pas en haut à gauche. Vu que ce n'est, à ma connaissance, pas possible, je suis à la recherche d'une autre manière de faire.

Voici mon code:

Merci d'avance ! 

<!DOCTYPE html>
<html lang="fr-FR">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	  <div class="portfolio">
	    <div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		  <h3 class="title">titre centré 1</h3>
	
	    </div>
	    <div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
	      <h3 class="title">titre centré 2</h3>
	
	    </div>
	    <div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
	
	    </div>
	    <div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		</div>
		<div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		</div>
		<div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		</div>
		<div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		</div>
		<div class="square">
	      <img src="https://www.ecbru.be/assets/images/design2012/news/2017/12/stages.jpg">
		</div>
  </div>
	</body>
</html>
body {
  margin: 0 auto;
}
* {
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing:     border-box;
	box-sizing: border-box;
}


.portfolio {		
 
  display: flex;
  flex-wrap: wrap;
}

.square {
	position: relative;
	background: #555555;
	width: 25%;
	border: 3px solid rgba(255, 255, 255, 1);
}

@media (max-width:600px) {
  .square {
    width: 50%;
  }
}

@media (max-width:400px) {
  .square {
    width: 100%;
  }
}

.square h1 {
	color: #123456;
}

.square img {
	width: 100%;
	display:block;
	filter: none;
}

.square img:hover {
	filter: grayscale(100%);
}
.portfolio .title {
	position: absolute;
	top: 20%;
	vertical-align: middle;
	z-index: 2;
}



Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
5 janvier 2018 à 21:53:18

salut,

Mets ton .square en position: fixed;

et en z-index: 1;

puis ton texte tu le mets en z-index:2;

et tu rajoute ces 3 ligne dans ton texte également :

- text-align : center;

- justify-content: center;

- align-items: center;

si jamais 1 des 3 ne te convient pas tu peux mettre des commentaires temporaire pour voir les changement :)

voilà voilà !

M.penaud

Etudiant en BTS Services Informatiques aux Organisation - Developpeur Jeux Vidéo / WEB / Objet
5 janvier 2018 à 21:55:57

Salut modifie cette class dans ton CSS

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #555555;
  width: 25%;
  border: 3px solid rgba(255, 255, 255, 1);
}

Si je peut me permettre pourquoi tu ne mais pas t'es photos en background ça t’éviterai la position relative qui et relou à géré !!!

5 janvier 2018 à 22:01:00

Non noopy360 , s'il mets son image en fond d'écran, il ne pourras pas centré le texte et son image sera de la taille du texte ce qui pose souvent des problèmes :)

Je pense que tu vois de quoi je parle car tu es "confirmé" :p

Etudiant en BTS Services Informatiques aux Organisation - Developpeur Jeux Vidéo / WEB / Objet
11 janvier 2018 à 12:32:17

Mathieu Penaud a écrit:

Mets ton .square en position: fixed;

Merci Mathieu pour ton aide. 

Si je mets mon .square en position:fixed, tous mes .square se retrouvent les uns sur les autres, alors que j'ai plusieurs cadres à mettre.

Exemple:

Je dois donc garder mon .square en position:relative, je pense ?

Texte centré sur image

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown