Comment centrer une div

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention - 4 déc. 2020 à 03:00

bonsoir a tous

cela fait plusieurs heures que j essaye de centrer une div
j ai trois 3 div
div left
div centre
div right

j essaye de mettre la div du centre entre les deux autres et sur la même ligne
soit cela ne fonctionne pas et quand cela fonctionne cela n est pas sur la même ligne
merci de l aide

avec le code suivant

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Video Background Transparent Navbar</title>
  <link rel="stylesheet" href="./style.css">
<style type="text/css">
.main-item
{
  display:inline-block;
  vertical-align:top;
  position:relative;
}
.main-item .sub-items
{
  display:none;
}
.sub-items a
{
  display:block;
}
.main-item:hover .sub-items
{
  display:block;
  position:absolute;
}

.navigation{
  padding-top:30px;
  padding-bottom:30px;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}
.navbar-left{
  float:left;
  padding-right:10%;
  font-size: 150%;
}

.navbar-left a{
  text-decoration:none;
  padding:10px;
  
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-l a:hover{
  text-decoration:underline;
}
.navbar-right{
  float:right;
  padding-right:10%;
  font-size: 150%;
}

.navbar-right a{
  text-decoration:none;
  padding:10px;
  
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-right a:hover{
  text-decoration:underline;
}
.navbar-centre{

  padding-right:10%;
}

.navbar-centre a{
  text-decoration:none;
  padding:10px;
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-centre a:hover{
  text-decoration:underline;
}
.navbar-logo{
  padding-left:10%;
  font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
}

.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#video-bg{
  width:100%;
 
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<header>
  <div class="header">
  <nav class="navigation">
  <div class="navbar-left">
      <a href="#" class="navbar-logo">Logo</a>
	  <a href="#" class="navbar-logo">Logo</a>
	  </div>
	  
      <div class="navbar-centre">
        <div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
       </div>
      <div class="navbar-right">
		<a href="https://www.facebook.com/axedis" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f232ee949e83eb7ba3_facebook.svg" loading="lazy" alt=""></a>
		<a href="https://www.linkedin.com/company/axedis-eta/" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f3782fc23479738208_linkedin.svg" loading="lazy" alt=""></a>
		<a href="https://www.youtube.com/channel/UCKGtfGpUPjR6mz46p5rbLVw" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f71e05b083762b3d1965a66_youtube.svg" loading="lazy" alt="" class="yt-icon"></a>
		<a href="tel:0103" class="phone-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f2bbde5907a1548430_phone.svg" loading="lazy" alt="" class="phone-icon">069/6</a>
      </div>
    </nav>

    <div class="video-container">
      <video autoplay loop muted id="video-bg">

        <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">

      </video>
    </div>
  </div>
</header>

  
</body>
</html>

Afficher la suite

A voir également:

Comment centrer une div
Div c++ - Télécharger - Langages
Comment mettre le centre de controle sur l'écran - Guide
Remplacer #div/0 par vide - Forum Excel
Comment trouver le numéro du centre de messagerie - Guide
Fusionner et centrer excel grisé - Forum Bureautique

3 réponses

Réponse 1 / 3

dachiasse Messages postés 1709 Date d'inscription Statut Membre Dernière intervention 150

Salut,

As-tu essayé avec un span au lieu d'un div ?

Ce lien donne des bonnes pratiques : https://github.com/EmmanuelBeziat/guidelines/blob/master/css/bonnes-pratiques.md#positionnement

Réponse 2 / 3

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

bonjour
merci pour la reponse
je remplace le div par un span ?

je suis allé voir le lien et j ai essaye
Utiliser les méthodes de positionnement dans cet ordre de préférence :

display: block | inline;
display: flex | inline-flex; / display: grid;
display: inline-block | table-cell;
float: left | right;
position: relative | absolute | sticky | fixed;

mais cela ne semble pas fonctionner non plus

Réponse 3 / 3

bg62 Messages postés 23732 Date d'inscription Statut Modérateur Dernière intervention 2 409

vois si ceci te conviendrait :
https://forums.commentcamarche.net/forum/affich-29174877-aligner-3-div
et si vraiment trop de problèmes, les 3 solutions possibles avec la CSS sont ici :
https://www.w3schools.com/css/css_templates.asp
tu adaptes ensuite à ton goût ....
:)

Discussions similaires

Utilisation des méthodes de manipulations du DOM

comment remplacer un #div/0! par une cellule vide

centrer le nom des dossier

Impossible fusionner cellules

Méthodes de Condorcet

Votre réponse

Discussions similaires