web-dev-qa-db-fra.com

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

Comme vous pouvez le voir dans le violon suivant: http://jsfiddle.net/EvWc4/3/ , je cherche actuellement un moyen d'aligner le deuxième lien (link-alt) sur le côté droit de son parent (p).

Pourquoi ne pas utiliser float ou position: absolu, direz-vous, la raison principale en est que j'apprécie le fait que la propriété display (inline-block) des liens leur permette de s'aligner verticalement de manière naturelle.

En utilisant float ou position: absolute; Je serai obligé de calculer et de mettre une valeur supplémentaire margin-top ou top pour aligner verticalement les liens.

Voici le code mais il vaut mieux voir le Fiddle http://jsfiddle.net/EvWc4/3/ :

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

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }
vertical-alignmentcss
16
inwpitrust

Pour ce faire avec CSS3, vous pouvez utiliser le modèle Flex Box.

HTML:

<div class="content">
    <div class="box box1"><a>Link 1</a></div>
    <div class="box box2"></div>
    <div class="box box3"><a>Link 2</a></div>
</div>

CSS:

.content {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.box2 {
    box-flex: 1;
}

(nécessite des préfixes de vendeurs)

http://jsfiddle.net/EvWc4/18/

9
Petah

Les éléments flex et grid de CSS3 sont supposés résoudre ces problèmes, mais la prise en charge standard reste inégale à partir de 2013. 

Retour dans le monde réel. Je ne pense pas qu'il soit possible de le faire uniquement en CSS2.1 (IE8 +) sans piratage de pixels. En réalité, l’alignement du texte est contrôlé par l’élément parent et, comme les deux ancres partagent le même parent, elles s’alignent toutes les deux à gauche ou à droite. Et justifier ne fonctionne pas sur la dernière ligne.

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

1) Ajoutez un autre élément en ligne qui est garanti pour envelopper la ligne, puis essayez de masquer la ligne vide. Cela vous permet d'utiliser une justification d'alignement de texte 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>

Avantages: fonctionne sur un nombre quelconque de blocs en ligne, pas seulement deux. Seulement un peu de HTML supplémentaire est requis.

Inconvénients: il faut déployer des efforts supplémentaires pour masquer la dernière ligne de texte (vide) (régler le bloc en ligne à une hauteur de 0 ne vous aidera pas), et vous allez devoir jouer avec des marges ou quelque chose d'autre pour le créer. vraiment travailler. Discussion ultérieure: Comment * puis-je vraiment justifier un menu horizontal en HTML + CSS?

2) Ajoutez une autre couche de blocs en ligne au-dessus de vos balises d'ancrage et redimensionnez-les à 50%. Ensuite, vous pouvez appliquer un alignement de texte séparé pour obtenir la mise en page finale que vous avez demandée. Il est important qu'aucun espace ne soit autorisé entre deux blocs en ligne d'une taille de 50%, sinon vous allez 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>

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

Inconvénients: ne fonctionne que pour deux blocs en ligne (vous pouvez essayer de l'étendre, mais cela devient vite très compliqué). Ne comptez aucun espace supplémentaire, ce qui pourrait compromettre votre balisage bien formaté.

9
Daniel S.

Vous pouvez définir la position sur absolute et utiliser right: 0

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

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

5
Petah

Je crois que cela 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 le bon alignement. Pour garder le centrage vertical, vous pouvez utiliser top: 0; bottom: 0; margin: auto;. Bien sûr, vous devrez également définir une hauteur sur l'élément, sinon celui-ci s'étendra sur toute la hauteur de son parent. 

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

4
James Duffy

J'ai mis à jour l'exemple Pethas afin que cela puisse être fait en CSS2 pur. Cela ne fonctionne pas dans IE7, car il ne supporte pas display: table-cell; que j'utilise.

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

2
curly_brackets

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. Définir le dépassement de capacité du parent sur autre chose que sa valeur par défaut (visible) l'obligera à traiter les enfants flottants comme des éléments normaux.

Article de référence

1
Will P.

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) exploite text-align: right et width: 50% sur les enfants alignés et white-space: nowrap sur le parent pour obtenir le résultat souhaité.

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;
}
0
Erik Jung