vertical alignment - texto - ¿Cómo alinear a la derecha un elemento de bloque en línea?
centrar texto vertical y horizontal css (7)
Como puede ver en el siguiente Fiddle: http://jsfiddle.net/EvWc4/3/ , actualmente estoy buscando una forma de alinear el segundo enlace (link-alt) al lado derecho de su padre (p).
¿Por qué no usar flotador o posición? Absolutamente dirá, bueno, la razón principal es que me gusta el hecho de que la propiedad de visualización de los enlaces (bloque en línea) les permita alinearse verticalmente de una manera natural.
Mediante el uso de flotador o posición: absoluta; Me veré obligado a calcular y colocar un margen superior o superior para alinear verticalmente los enlaces.
Aquí está el código, pero mejor ver el 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; }
Creo que esto logra lo que estás buscando:
.link-alt {
position: absolute;
right: 0; top: 0; bottom: 0;
margin: auto;
max-height: 1em;
}
Puede usar position: absolute y right: 0 para obtener la alineación correcta. Para mantener el centrado vertical, puedes usar top: 0; bottom: 0; margin: auto; top: 0; bottom: 0; margin: auto; . Por supuesto, también deberá establecer una altura en el elemento, o se extenderá hasta la altura máxima de su elemento principal.
Aquí hay un jfiddle: http://jsfiddle.net/pHppA/
El atributo float no tiene relación con la posición vertical del elemento.
p{padding:20px;background:#eee;overflow:auto;}
.link-alt{padding:20px; float:right}
Debería cumplir lo que está buscando. Establecer el desbordamiento del padre en algo además de su valor predeterminado (visible) lo forzará a tratar a los niños flotantes como elementos normales.
He actualizado el ejemplo de Pethas, por lo que se puede hacer en CSS2 puro. No funciona en IE7, ya que no es compatible con la display: table-cell; que yo uso
No he probado esto en absoluto fuera de Chrome, por lo que podría apestar para IE.
Esta solución simple (y limitada) aprovecha text-align: right y width: 50% en los elementos secundarios alineados, y white-space: nowrap con el padre 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;
}
Para hacer esto con CSS3 puedes usar el modelo de caja flexible.
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 proveedor)
Podrías establecer la position en absolute y usar la right: 0
.wrapper {
position: relative;
}
.right {
position: absolute;
right: 0;
}
Se supone que los elementos de flexión y cuadrícula de CSS3 abordan estos problemas, pero el soporte estándar sigue siendo irregular a partir de 2013.
De vuelta al mundo real. No creo que sea posible hacerlo simplemente en CSS2.1 (IE8 +) sin hacks de píxeles. La cosa es que la alineación del texto está controlada por el elemento padre y, como los dos anclajes comparten su padre, ambos se alinean hacia la izquierda o hacia la derecha. Y justificar no funciona en la última línea.
Si puedes sufrir un poco de HTML adicional, hay dos enfoques:
1) Agregue otra línea en línea que esté garantizada para envolver la línea y luego intente ocultar la línea vacía. Esto le permite usar justificación de alineación de texto en el padre.
<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 extra.
Contras: requiere un esfuerzo adicional para ocultar la última línea (vacía) de texto (establecer el bloque en línea dentro de la misma a 0 altura no lo ayudará), y tendrá que jugar con los márgenes o alguna otra cosa para hacerlo realmente funcionan. Más discusión: ¿Cómo puedo * realmente * justificar un menú horizontal en HTML + CSS?
2) Agregue otra capa de bloques en línea en la parte superior de sus etiquetas de anclaje y ajústelas al 50%. Luego puede aplicar una alineación de texto separada para obtener el diseño final que solicitó. Es importante que no se permita ningún espacio en blanco entre dos bloques en línea con 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 solicitaste sin contaminar el modelo de caja exterior.
Contras: solo funciona para dos bloques en línea (puedes intentar extenderlo, pero se complica rápidamente). Depende de no tener espacios en blanco adicionales, lo que podría poner en peligro su marcado bien formateado.