28172 sujets

CSS et mise en forme, CSS3

Problème, un objet ne veux pas se centrer

Bonsoir, je fais actuellement un site et un défi que je me suis lancé(je suis lycéen et j'ai appris le html+css en 3 jours)et de mettre une vidéo sur ma page web... Jusque là rien de bien compliqué. Seulement, la vidéo n'est pas centré par rapport au reste, j'ai beau tenté je n'y arrive pas... je dois rendre ce site pour demain matin alors c'est très urgent et sa fais 2 heures que je bloque. voilà le code html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style3.css" />
<title>Le Bazar de Quint-Haus et Vexell: Jeux vidéos</title>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<h1>Le Bazar de Quint-Haus <br />
et Vexell: Jeux vidéos</h1>
</div>
<nav>
<ul>
<li><a href="page1.html" title="vous n'allez pas le regretter">Accueil</a></li>
<li><a href="page2.html" title="vous n'allez pas le regretter">Jeux de rôles</a></li>
<li><a href="page3.html" title="vous y êtes déjà...">Jeux vidéos</a></li>
</ul>
</nav>
</header>
<section>
<article>
<p>Ici, on parle de jeu vidéos, il y en a en tout genre et de tout type!<br />
Entre les univers fantastiques à la "Skylanders", les platformers à la "Rayman" vous ne pourrez pas être déçu.
</p>
</article>
<aside>
<h2> Sommaire:</h2>
<ul>
<li><a href="#skylanders">Skylanders</a></li>
<li><a href="#rayman">Rayman</a></li>
</ul>
</aside>
</section>

<div class="skylanders">
<video src="" controls poster="skylanders-spyros-adventure-review-header.jpg"width="600" preload=metadata></video>
</div>
<footer>
<p><a href="mailto:knechtq@gmail.com">Nous contacter !</a></p>
</footer>
</div>

</body>
</html>

et le code css:
body
{
background-image: url('https://i.jeuxactus.com/datas/jeux/t/h/the-witcher-3-wild-hunt/xl/the-witcher-3-wild-hunt-54c616fcc1e63.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
font-family: Trebuchet MS,Arial Black;
color: black;
}

#bloc_page
{
width: 900px;
margin: auto;
}

section h1, footer h1, nav a
{
font-family: Trebuchet MS, Arial Black;
font-weight: normal;
text-transform: uppercase;
}

header
{
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAACACAMAAAAmuQ7NAAAAA1BMVEWBgoZK45CxAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwK8BxIAAAXrpPN0AAAAASUVORK5CYII=') repeat-x bottom;
display: flex;
justify-content: center;
align-items: flex-end;
color: white;
}

#titre_principal
{
display: flex;
flex-direction: column;
columns: auto;
}

header h1
{
font-family: Arial Black, Arial;
font-size: 2em;
font-weight: normal;
margin: 0 0 0 10px;
}

nav ul
{
list-style-type: none;
display: flex;
}

nav li
{
margin-right: 15px;
}

nav a
{
font-size: 1.3em;
padding-bottom: 3px;
text-decoration: none;
}

nav a:hover
{
color: #760001;
border-bottom: 3px solid #760001;
}

aside
{
flex: 1.2;
position: relative;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAACACAMAAAAmuQ7NAAAAA1BMVEWBgoZK45CxAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwK8BxIAAAXrpPN0AAAAASUVORK5CYII=');
border-radius: 0px 0px 5px 5px;
padding: 10px;
color: black;
font-size: 0.8em;
display: inline-block;
}

section
{
display: flex;
margin-bottom: 20px;
}

article
{
text-align: justify;
flex: 3;
font-size:1.5em;
text-align: center;
float:right;
}

.video
{
text-align: center;
width: 360px;
margin-left: auto;
margin-right: auto;
margin-bottom:35px;
display: flex;
float:center;

}




footer
{
display: flex;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYgAAACACAMAAAAmuQ7NAAAAA1BMVEWBgoZK45CxAAAAR0lEQVR4nO3BAQEAAACCIP+vbkhAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwK8BxIAAAXrpPN0AAAAASUVORK5CYII=')repeat-x bottom;
padding-top: 25px;
font-size: 2em;
margin:auto;
border-radius: 10px 10px 10px 10px;
justify-content: center;
}

Merci à vous
Bonjour,

Si tu veux centrer la vidéo il suffit d'appliquer un text-align sur le parent qui contient la vidéo, dans notre cas c'est la div.skylanders

.skylanders {
   text-align: center;
}
Friesstyle a écrit :
Bonjour,

Si tu veux centrer la vidéo il suffit d'appliquer un text-align sur le parent qui contient la vidéo, dans notre cas c'est la div.skylanders

.skylanders {
   text-align: center;
}


Oué, et il est possible également d'utiliser "margin:auto" pour cela
Mais pour utiliser une margin-right: auto et une margin-left: auto, il faut attribuer une largeur à l'élément à centrer.
Sujet clos
Aller à