28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis train de créer un footer avec deux colonnes de texte. J'aimerai que le texte de ma deuxième colonnes "class: page footer" soit centrer verticalement par rapport au premier bloc mais je ne trouve pas le solution .
Voici le code si vous avez une solution ^^

HTML
<footer class="container-fluid pt-5 pb-5">
		<div class="container container-footer">
			<div class="row">
				<div class="col-8 ">
					<div class="logo-nomad mb-2">
						<img src="assets/images/Logo-Nomad-White.png">
					</div>
					<div class="footer-contact font-weight-bold container-footer">
						<p class="mb-0">//contact@gmail.com</p>
						<p class="mb-0"><a href="">//facebook</a></p>
					</div>
					<div class="legal-footer">
						<ul>
							<li class="d-inline">Mentions légales</li>
							<li class="d-inline">Plan du site</li>
							<li class="d-inline">Site web réalisé par rhum rhum</li>
						</ul>
					</div>
				</div>
			

					<div class="page-footer font-weight-bold col ">
						<h4>//Pages//</h4>
						<ul class="mb-aut0">
							<li class="list-unstyled"><a href="">Accueil</a></li>
							<li class="list-unstyled"><a href="">Studio</a></li>
							<li class="list-unstyled"><a href="">Services</a></li>
							<li class="list-unstyled"><a href="">Contact</a></li>
						</ul>
				</div>
			</div>
		</div>
	</footer>


CSS / SASS

footer{
	background: #1C1B1B;
		.logo-nomad{
			img{
				width: 165px;
			}
			
		}
		.container-footer{
			font-size: 2.8rem;
			.footer-contact{
			}
			.legal-footer{
				li{
				  font-size: 0.8rem;	
				}
			}
			.page-footer{
				font-size: 2rem;
			}

		}
	
}

Modifié par gcyrillus (18 Mar 2020 - 21:36)
Modérateur
Bonjour,

La classe m-auto sur .page-footer semble correspondre à ce que tu cherche à faire.
Meilleure solution