Comment aligner un inline-block horizontalement et verticalement

Quel est le meilleur/le plus propre à l'aide de CSS pour aligner les #dates div sur le côté droit de la tête, et verticalement dans le milieu.

J'ai essayé float: right, mais qui ne permettent pas la vertical-align. Je veux éviter d'utiliser des flotteurs, donc je suis en utilisant inline-block, et en utilisant le positionnement relatif. Est-il plus approprié?

Je n'aime pas le fait que j'ai à faire un top de 30px, et à l'aide d'essais et d'erreur jusqu'à ce qu'il centres.

<div id="header">
    <a id="logo" href="~/" runat="server">
        <img src="Images/Interface/logo.png" alt="logo" />
    </a>
    <div id="dates">
        <div id="hijri-date">2 Ramadhaan, 1435 AH</div>
        <div id="gregorian-date">Sunday 29 June 2014</div>
    </div>
</div>

#header
{
    background-color: white;
    padding: 15px;
    position: relative;
}

#logo
{
    display: inline-block;
    vertical-align: middle;
}

    #logo img
    {
        vertical-align: bottom; /* to get rid of text descender space underneath image */
    }

#dates
{
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
    background: url(Images/Interface/date-icon.png) no-repeat;
    background-position-y: center;
    padding-left: 32px;
}

OriginalL'auteur sprocket12 | 2014-07-04

  1. 1

    Vous pouvez faire usage de css display:table:

    #header {display:table; width:100%;}
#logo,
#dates {display:table-cell; vertical-align:middle}

    Exemple

    Vous pouvez avoir besoin de donner le n ° dates d'une largeur si vous voulez qu'il soit aligné à droite

    Est-il possible pour une cellule à la largeur de son contenu au lieu de 50%?
    CSS tables ont des avantages pour cette application. Il pourrait aider à avoir un sous-wrapper div autour du bloc de texte dans la main droite d'une cellule de tableau, de cette façon, vous pouvez utiliser text-align droit, et pas besoin de s'inquiéter quant à la nature exacte de la table largeur de la cellule.
    comment est-ce jsfiddle.net/peteng/F7Nb5/4

    OriginalL'auteur Pete

  2. 1

    À L'Aide De Inline-Blocks

    À l'aide de vos éléments HTML comme affiché, essayez le code CSS suivant:

    #header {
    background-color: yellow;
    padding: 15px;
    text-align: justify;
    line-height: 0;
}
#logo {
    display: inline-block;
    vertical-align: middle;
}
#logo img {
    vertical-align: bottom; 
        /* to get rid of text descender space underneath image */
}
#dates {
    display: inline-block;
    line-height: 1.5;
    font-size: 14px;
    font-family:'Open Sans';
    color: black;
    background-image: url(http://placehold.it/100x100);
    background-position: center;
    padding-left: 32px;
}
#header:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

    Puisque vous avez deux éléments enfants #header, à gauche de l'image du logo et d'un droit du bloc de texte, il suffit d'utiliser text-align: justify pour forcer le logo à gauche et le texte à droite.

    Pour obtenir que cela fonctionne, vous avez besoin d'au moins deux lignes dans le #header.

    Pour générer une deuxième ligne, l'utilisation d'un pseudo-élément: #header:after qui va mettre en place un 100% grand vide inline-block après la date. Le width: 100% des forces pour démarrer et remplir une 2ème ligne et de la vertical-align: top se débarrasser de l'espace blanc supplémentaire en dessous de la ligne de base.

    De traiter avec l'espace blanc de la hauteur, réglez line-height: 0 dans #header qui permettra à la hauteur de la pseudo-élément à l'effondrement de 0. Cependant, vous devez réinitialiser le line-height: 1.5 dans #dates pour obtenir un texte lisible.

    Avantages et les Inconvénients

    Avec cette approche, les éléments finira par enveloppe à deux lignes, comme la largeur de la page est petite.

    Si vous souhaitez conserver les éléments sur une seule ligne, vous pourriez être mieux à l'aide de CSS tables.

    Voir démo: http://jsfiddle.net/audetwebdesign/3U3w4/

    OriginalL'auteur Marc Audet

  3. 0

    Je pense, la meilleure façon pour le vertical align est à l'aide de css:display-table et css"display-table-cell propriétés. Si vous souhaitez aligner à droite le contenu de id="dates", vous devez utiliser css:display-inline-table à l'intérieur de ce bloc.

    #header {
    background: #fff;
    padding: 15px;
    background: #ccc;
    display: table;
}
#logo {
    display: table-cell;
}
#dates {
    display: table-cell;
    text-align: right;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #696969;
}

    Voir Tripoter

    OriginalL'auteur Vladimir Shevchuk

  4. 0

    À l'aide de display: flex; propriété, vous pouvez définir les éléments à l'horizontale et à la verticale du centre.

    Exemple

    Avoir des problèmes de réglage d'un élément à être aligné à gauche et un autre de l'autre côté aligné à droite... pouvez-vous donner un exemple?

    OriginalL'auteur Ashish Mehta