[Résolu] Centrer text par rapport à une div par nezridan - page 1

17 juin 2019 à 22:51:31

Bonjour,

Débutant en CSS je n'arrive pas à centrer un text (.main-title) par rapport une div (.logo).

Quand je fais un text-align: left, tout fonctionne mais lorsque j'utilise text-align: center, le text est complément décalé sur la droite.

Voici le CSS utilisé.

@media (min-width: 1200px) {
  .container {
    width: 1170px;
    margin-left: 60%;
  }

  .header {
	background: url(back_lap.png);
	height: 110vh;
	background-size: cover;
	
	}

 .logo {
		width: 450px;
		padding-top: 10%;
		position: relative;	
	}

  .main-title {
	text-transform: uppercase;
	margin-top: 20px;
	font-weight: 100;
	font-size: 30px;
	position: relative;
	text-align: center;
	letter-spacing: .4rem;


}
	.card {
		position: relative;
		top: 30vh;
	}

}

Merci pour votre aide.

AbcAbc6

17 juin 2019 à 23:54:23

Bonsoir, quel est le HTML correspondant? pour que text-align fonctionne il doit s’appliquer sur le parent du texte que tu souhaites aligner.

ThibaudRoussel

18 juin 2019 à 11:43:09

Tu as essayé sans le position relative ?

nezridan

18 juin 2019 à 12:37:35

Bonjour,

Oui j'ai essayé sans le position relative mais ça ne change pas.

Voici le code HTML correspondant :

<!DOCTYPE html>
<html>
<head>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="style2.css" rel="stylesheet">
	<title></title>
</head>
<body id="basic-setup">
	<header class="header">
		<div class="container">
			<div class="row">
				<div class="col-xl-12">
					<img class="logo" src="logo.png">
				</div>
			</div>
			<div class="row">
			<div class="col-xl-12 ">
			 	<h1 class="display-4 main-title">Prenom <strong>Nom</strong></h1>

						<div class="row">
							<div class="col-xl-12">
								<div class="card bg-dark text-white" id="un">
									<img src="card.png" class="card-img" alt="...">
									<div class="card-img-overlay">
									<h5 class="display-4 card-title"><strong>Réserver</strong> un cours</h5>
									</div>
								</div>
							</div>
							<div class="col-xl-12">
								<div class="card bg-dark text-white" id="un">
									<img src="card.png" class="card-img" alt="...">
									<div class="card-img-overlay">
									<h5 class="display-4 card-title"><strong>Réserver</strong> un cours</h5>
									</div>
								</div>
							</div>
							<div class="col-xl-12">
								<div class="card bg-dark text-white" id="un">
									<img src="card.png" class="card-img" alt="...">
									<div class="card-img-overlay">
									<h5 class="display-4 card-title"><strong>Réserver</strong> un cours</h5>
									</div>
								</div>
							</div>
						</div>
					</div>
			
		</div>
	</header>
</body>
</html>

Frogweb

18 juin 2019 à 12:47:10

Tu as juste à mettre text-align:center sur .main-title comme tu l'as fait et ça doit fonctionner.

A moins que la classe .display-4 mette ce titre en display:inline-block...

Mais quel rapport avec .logo ? Je pense que tu as mal exprimé ton problème.
Tu veux que logo et titre soient alignés au centre ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

nezridan

18 juin 2019 à 12:58:58

Non je veux que le titre soit centré par rapport au logo.

Le logo correspond au bloc bleu et je voudrais que le text soit en dessous et centré par rapport à ce de ce dernier.

L'image ci dessous correspond à un text-align:center.

L'image ci dessous correspond à un text-align : left.

Frogweb

18 juin 2019 à 13:02:15

Sauf qu'ils ne sont pas du tout au même endroit.

Donc commence par mettre .logo et .main-title ensemble, donne à .main-title la même largeur que .logo (400px) et met lui un margin:auto.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

nezridan

18 juin 2019 à 13:10:12

Ça fonctionne en rajoutant seulement width: 450px; au .main-tiltle.

Merci pour votre aide

Centrer text par rapport à une div

Supprimer

Modérer

Signaler le message aux modérateurs