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;
}

Fox Aera

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

noopy360

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é !!!

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Fox Aera

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é"

Martikreut

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 ?