Alignement des classes h1 à l'intérieur d'un ID div

Question

J'essaie d'aligner certaines classes de sorte que "left" s'aligne sur la partie gauche de #header, "links" s'aligne au centre, et "right" s'aligne à droite de #entête. J'aimerais aussi que les icônes s'alignent avec le texte dans #header verticalement.

lien jsFiddle: https://jsfiddle.net/uhd9h9o6/

#header{ 
    width:90%; 
    height:60px; 
    margin: 20 auto; 
    position:relative; 
    display:block; 
    font-family: 'Raleway', sans-serif; 
} 

.left{ 
    color:#000; 
    text-align: left; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding:0px; 
    font-size:24px; 
    position:relative; 
    width:220px; 
    display:block; 
    z-index:2; 
    margin-left:1.5%; 
    height:50px; 

} 

.right{ 
    color:#000; 
    text-align: left; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding:0px; 
    font-size:22px; 
    position:relative; 
    width:90px; 
    display:block; 
    z-index:2; 
    margin-right:2.5%; 
    height:50px; 
    vertical-align:bottom; 
} 

.links{ 
    color:#000; 
    float:left; 
    font-size:24px; 
    display:block; 
    position:relative; 
    width:150px; 
    margin-top: 0; 
    margin-bottom: 0; 
    padding:0px; 

    } 

Toute aide serait grandement appréciée!

Answer 1

Votre exemple jsfiddle utilise également .left et text-align:center et le même pour .right. Au lieu d'utiliser , vous pouvez utiliser la largeur en fonction de chaque élément de votre bloc d'en-tête.

Exemple:

-------------------------------------- 
|    |  |    | 
| header-left | center | header-right| 
|    |  |    | 
-------------------------------------- 
width:33%  33%  33% 

Selon aucune. d'éléments, Quelque chose comme css grids

Meilleure option, vous pouvez utiliser bootstrap-grille.