Disposition differente pour 3 blocs dans un header

Par CoffeeMan, il y a 5 ans

Les bases HTML/CSS

Bonjour,

J'essai de créer un header pour mon site. Ce header doit contenir une image à gauche, un input pour une recherche au centre et un ou plusieurs boutons à droite. (Un peu comme le site de youtube). J'arrive à positionner l'image à gauche et les boutons à droite mais je ne vois pas comment mettre mon input au centre

Voici mon code : 

<div class="header-root">
    <div class="header-left header-items" >
        <img src="../../../assets/img/logo.png" alt="Logo" style="background-color : red">
    </div>
    <div class="header-center header-items" style="background-color : green">
        <input type="text" v-model="search" >
    </div>
    <div class="header-right header-items" style="background-color : yellow">
        <p>Connexion</p>
    </div>
</div>

.header-root {
    position: relative;
    background-color: rgb(22,24,35);
    width: 100%;
}
.header-items {
    display: inline-block;
}
.header-left {
    float: left;
}
.header-center {
    /* ??? */
}
.header-right {
    float: right;
}

Est-ce que quelqu'un a une idée?

Merci d'avance

2 réponses

ReckEx, il y a 5 ans

Salut,

Une premiére solution serait d'utiliser flexbox pour ta mise en page, je te laisse voir sur google, tu trouveras une tonnes de doc.

Essaye ça :

.header-root { display: flex; justify-content: space-around; // Ou space-between }

A +

CoffeeMan, il y a 5 ans

Merci pour ta reponse ReckEx.

Voici les propriétés importantes qui vont permettre de résoudre mon souci:

.header-center {
    flex: 1 1 auto;
    text-align: center;
}

.header-root {
    display: flex;
    align-items: center;
}