Comment aligner à droite un élément inline-block?

CSS3 flex et grid items sont censés résoudre ces problèmes, mais le support standard reste faible à partir de 2013.

Retour vers le monde réel. Je ne pense pas qu'il soit possible de le faire uniquement en CSS2.1 (IE8+) sans pixel hacks. Le truc c'est que l'alignement du texte est contrôlé par l'élément parent, et puisque les deux ancres partagent leur parent, elles s'alignent soit à gauche, soit à droite. Et justifier ne marche pas sur la dernière ligne.

Si vous pouvez souffrir un peu plus HTML, il y a deux approches:

1) Ajouter un autre inline qui est garanti pour envelopper la ligne, puis essayer de cacher la ligne vide. Cela vous permet d'utiliser la justification text-align sur le parent.

<p>
    <a href="#" class="link">link</a>
    <a href="#" class="link link-alt">link alt</a>
    <span class="boom"></span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
        text-align: justify
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        height: 0;
        width: 100%
    }
</style>

Pros: fonctionne sur n'importe quel nombre de blocs en ligne, pas seulement deux. Seulement un peu de HTML supplémentaire requis.

Cons: il faut un effort supplémentaire pour cacher la dernière ligne (vide) de texte (définir la ligne bloc à l'intérieur de 0 hauteur ne sera pas vous aider) et vous allez avoir à jouer avec des marges ou quelque chose d'autre à faire fonctionner vraiment. Discussion complémentaire: Comment puis-je *vraiment* justifier un menu horizontal en HTML+CSS?

2) Ajouter une autre couche de blocs en ligne sur le dessus de vos étiquettes d'ancrage et les dimensionner à 50%. Ensuite, vous pouvez appliquer le texte séparé-aligner pour obtenir la mise en page finale que vous avez demandé. Il est important qu'aucun espace blanc ne soit autorisé entre deux blocs en ligne de la taille de 50%, ou vous envelopper la ligne.

<p>
    <span class="left">
        <a href="#" class="link">link</a>
    </span><span class="right">
        <a href="#" class="link link-alt">link alt</a>
    </span>
</p>

<style type="text/css">
    p {
        padding: 20px;
        background: #eee;
    }

    .link {
        display: inline-block;
        padding: 10px;
        background: #ddd;
    }

    .link-alt {
        padding: 20px;
    }

    span {
        display: inline-block;
        width: 50%
    }

    .left {
        text-align: left
    }

    .right {
        text-align: right
    }
</style>

Pros: produit la mise en page exacte que vous avez demandé sans polluer le modèle de la boîte extérieure.

inconvénients: ne fonctionne que pour deux blocs en ligne (vous pouvez essayer de l'étendre, mais il devient rapidement très compliqué). Repose sur n'avoir aucun espace blanc supplémentaire, ce qui pourrait compromettre votre markup joliment formaté.

vous pouvez définir le position à absolute et utiliser right: 0

.wrapper {
    position: relative;
}
.right {
    position: absolute;
    right: 0;
}

http://jsfiddle.net/EvWc4/13 /

je crois que ceci accomplit ce que vous cherchez:

.link-alt {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    margin: auto;
    max-height: 1em;
}

vous pouvez utiliser position: absolute et right: 0 pour obtenir l'alignement droit. Pour maintenir le centrage vertical, vous pouvez utiliser top: 0; bottom: 0; margin: auto; . Bien sûr, vous aurez également besoin de définir une hauteur sur l'élément, ou il s'étirera à la pleine hauteur de son parent.

voici un jfiddle: http://jsfiddle.net/pHppA/

j'ai mis à jour L'exemple de Pethas, de sorte qu'il peut être fait en CSS2 pur. Il ne fonctionne pas dans IE7, car il ne supporte pas display: table-cell; que j'utilise.

http://jsfiddle.net/EvWc4/133 /

l'attribut float n'a aucune incidence sur le positionnement vertical de l'élément.

p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}

devrait accomplir ce que vous cherchez. Mettre le débordement du parent à quelque chose d'autre que sa valeur par défaut (visible) le forcera à traiter les enfants flottants comme des éléments normaux.

article de référence

Je n'ai pas testé cela du tout en dehors de Chrome, donc ça pourrait être nul pour IE.

cette solution simple (et limitée) utilise text-align: right et width: 50% sur les enfants alignés, et white-space: nowrap sur le parent pour obtenir le résultat désiré.

exemple: http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module {
    white-space: nowrap;
}

.vertically-centered-module > * {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}

.vertically-centered-module > :last-child {
    text-align: right;
}