para - Verticalmente gira el texto con CSS

lista de codigos css

Question

Tengo el siguiente HTML:

<div class="outer">
    <div class="inner rotate">Centered?</div>
</div>

div.outer es una tira vertical estrecha. div.inner se gira 90 grados. Me gustaría que el texto "Centrado?" para aparecer centrado en su contenedor div. No sé el tamaño de cualquier div por adelantado.

Esto se acerca: http://jsfiddle.net/CCMyf/2/ . Puede ver en jsfiddle que el texto está centrado verticalmente antes de que se aplique el estilo de transform: rotate(-90deg) , pero se compensa un poco después. Esto es particularmente notable cuando div.outer es corto.

¿Es posible centrar este texto verticalmente sin conocer ninguno de los tamaños por adelantado? No he encontrado ningún valor de transform-origin de transform-origin que resuelva este problema.

Answer 1

Eliminando: margin-top: -7px; de .inner hizo que el texto rotado verticalmente se centrara en mí. También hizo que el texto horizontal no esté centrado.

Simplemente elimine el código anterior?

Answer 2

La clave es establecer la posición superior e izquierda al 50% y luego transformarX y transformarY a -50%.

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotate {  
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

ver: http://jsfiddle.net/CCMyf/79/

Answer 3

La respuesta de ''bjnsn'' es buena pero no perfecta, ya que falla cuando el texto contiene espacio. Por ejemplo, usó ''Centered?'' como texto pero si cambiamos el texto para dejarlo suponer ''Centrado? o no '', entonces no funcionará bien y tomará la siguiente línea después del espacio. Ther no es ancho o alto definido para el bloque div interno.

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #DDD;
}

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Pero podemos hacer que todo el texto centrado se alinee correctamente, estableciendo el ancho del div interno igual a la altura del div externo, la altura de línea del div interno igual al ancho del exterior div y establecer la propiedad de visualización flexible para div interior con align-items: center y justify-content: center properties.

.inner {
  font-size: 13px;
  font-color: #878787;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content:center;
  align-items:center;
  line-height:40px;
}
$(''#height'').on(''change'', function(e) {
  $(''.outer'').css(''height'', $(''#height'').val() + ''px'');
  $(''.inner'').css(''width'', $(''#height'').val() + ''px'');
});

violín actualizado https://jsfiddle.net/touqeer_shakeel/cjL21of5/

Answer 4

Puede agregar margin: 0 auto; a su clase "rotar" para centrar el texto.

.rotate {
  -webkit-transform: rotate(-90deg);
  -ff-transform: rotate(-90deg);
  transform: rotate(-90deg);
  width: 16px;  /* transform: rotate() does not rotate the bounding box. */
  margin: 0 auto;
}

Answer 5

Puede ser un poco tarde para responder a esa pregunta, pero me encontré con el mismo problema y encontré la manera de lograrlo, agregando otro div en el camino.

<div class="outer">
    <div class=''middle''><span class="inner rotate">Centered?</span></div>
</div>

y aplicando un text-align: center en ese elemento medio, junto con algunas cosas de posicionamiento:

.middle {
    margin-left: -200px;
    width: 400px;
    text-align: center;
    position: relative;
    left: 7px;
    top: 50%;
    line-height: 37px;
}

El .inner también tiene una display: inline-block; para habilitar las propiedades de rotate y text-align .

Aquí está el violín correspondiente: http://jsfiddle.net/CCMyf/47/

Answer 6

Puedes agregar esto:

$(''.inner'').css(''margin-top'', $(this).parent().height() - 2*$(this).height());

Para su función .on(''change'') , como puede ver aquí: http://jsfiddle.net/darkajax/hVhbp/