¿Cómo alinear a la derecha un elemento de bloque en línea?

Question

Como puede ver en el siguiente Fiddle: http://jsfiddle.net/EvWc4/3/, actualmente estoy buscando la forma de alinear el segundo enlace (link-alt) al lado derecho de su elemento primario (p).

Por qué no usar el flotador o la posición: absoluto, bueno, la razón principal es que me gusta el hecho de que la propiedad display (inline-block) de los enlaces les permite alinearse verticalmente de una manera natural .

Al usar el flotador o la posición: absoluta; Me veré obligado a calcular y poner un margen extra, superior o superior, para alinear verticalmente los enlaces.

Aquí está el código, pero ver mejor el violín 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; } 

Answer 1

Para hacer esto con CSS 3 se puede utilizar el modelo de caja flex

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; 
} 

(necesita prefijos de proveedores)

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

Answer 2

El atributo float tiene nada que ver con la colocación vertical del elemento.

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

debería lograr lo que estás buscando. Establecer el desbordamiento del elemento primario en algo además de su valor predeterminado (visible) lo obligará a tratar a los niños flotantes como elementos normales.

Reference article

Answer 3

podría configurar el position a absolute y utilizar right: 0

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

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

Answer 4

No he probado esto en absoluto fuera de Chrome, por lo que podría aspirar para IE.

Esta solución simple (y limitada) aprovecha text-align: right y width: 50% en los elementos secundarios alineados, y white-space: nowrap en el elemento principal para lograr el resultado deseado.

Ejemplo: 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; 
} 

Answer 5

He actualizado ejemplo Pethas, por lo que se puede hacer en CSS2 puro. No funciona en IE7, ya que no es compatible con display: table-cell; que yo uso.

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

Answer 6

elementos flexibles CSS3 y la red se supone que deben hacer frente a estos problemas, pero sigue siendo irregular soporte estándar a partir de 2013.

Volver al mundo real. No creo que sea posible hacerlo solo en CSS2.1 (IE8 +) sin hacks de píxeles. El asunto es que la alineación del texto está controlada por el elemento padre, y dado que los dos anclajes comparten su elemento primario, ambos se alinean a la izquierda o a la derecha. Y justificar no funciona en la última línea.

Si puede sufrir un poco de HTML adicional, hay dos enfoques:

1) Añade otra línea que está garantizado para envolver la línea y, a continuación, tratar de ocultar la línea de vacío. Esto le permite usar text-align justify en el elemento primario.

<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: funciona en cualquier número de bloques en línea, no solo en dos. Solo se requiere un poco de HTML adicional.

Contras: requiere un esfuerzo extra para ocultar la última línea de texto vacía (configurar el bloque en línea dentro de la altura 0 no le ayudará), y tendrá que jugar con los márgenes o algo más para que realmente funcione Discusión adicional: How do I *really* justify a horizontal menu in HTML+CSS?

2) Agregue otra capa de bloques en línea sobre sus etiquetas de anclaje y mida el tamaño al 50%. Luego puede aplicar texto-alinear por separado para obtener el diseño final que solicitó. Es importante que no se permita el espacio en blanco entre dos bloques en línea de un tamaño del 50%, o se ajustará la línea.

<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: produce el diseño exacto que ha solicitado sin contaminar el modelo de la caja exterior.

Contras: solo funciona para dos bloques en línea (puede intentar ampliarlo, pero se vuelve realmente complicado). Se basa en no tener espacios en blanco adicionales, lo que podría poner en peligro su marcado con formato agradable.

Answer 7

creo que esto logra lo que estás buscando:

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

Usted puede utilizar position: absolute y right: 0 para obtener la alineación correcta. Para mantener el centrado vertical, puede usar top: 0; bottom: 0; margin: auto;. Por supuesto, también necesitará establecer una altura en el elemento, o se extenderá a la altura completa de su elemento primario.

Aquí hay una jfiddle: http://jsfiddle.net/pHppA/