Вертикально повернутий текст, повернутий за допомогою CSS


76

У мене є такий HTML:

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

div.outerявляє собою вузьку вертикальну смугу. div.innerповертається на 90 градусів. Я хотів би отримати текст "По центру?" щоб виглядати в центрі у своєму контейнері div. Я не знаю розмір будь-якого div заздалегідь.

Це наближається: http://jsfiddle.net/CCMyf/2/ . З jsfiddle видно, що текст вертикально відцентрований до застосування transform: rotate(-90deg)стилю, але дещо зміщений після. Це особливо помітно, коли div.outerкороткий.

Чи можна відцентрувати цей текст вертикально, не знаючи жодного розміру заздалегідь? Я не знайшов жодного значення, transform-originяке б вирішило цю проблему.


Ви проти налаштування display: tableна елементи? Тому що «стандартний» спосіб вертикального вирівнювання динамічних діви повинні працювати з перетворенням без проблем: stackoverflow.com/a/6182661/188221
DigTheDoug

Я не проти display: table. Ця скрипка показує, що рішення таблиці має ті самі проблеми, що і вище: jsfiddle.net/4d384
danvk

Спробуйте поставити rotateклас на середній елемент. Це мало б це зробити, але схоже, це зіпсує ширину елемента. Можливо, доведеться пограти з підбивками,
DigTheDoug

Виправити проблему ширини набагато складніше, ніж можна було очікувати. Поклавши min-width: 16px; width: 16pxна .outerрезультати в тому ж Неурядовий центрування , як в оригінальному питанні.
danvk 01.03.13

Відповіді:


146

Ключовим моментом є встановлення верхнього та лівого положення до 50%, а потім transformX та transformY до -50%.

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

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

див .: http://jsfiddle.net/CCMyf/79/


2
Працюючи з текстовими елементами замість divs, мені довелося додати margin: 0внутрішній елемент, щоб зробити центр тексту ідеально.
kapoko

Дуже дякую. Я був не так далеко. Я не знаю , чому , але якщо я встановлюю правила повороту першої , як це: transform: rotate(-90deg) translateX(-50%) translateY(-50%);вона не працює, і якщо я ставлю його в останній раз, як ваш приклад показує, це працює translateX(-50%) translateY(-50%) rotate(-90deg);.
Максим Лафарі

6

Можливо, трохи пізно відповісти на це питання, але я натрапив на те саме питання і знайшов якийсь спосіб його досягнення, додавши ще один div на шляху.

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

і нанесення text-align: centerна цей середній елемент разом із деякими позиціонуючими матеріалами:

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

.innerТакож отримує display: inline-block;для того, щоб як rotateі text-alignвластивості.

Ось відповідна скрипка: http://jsfiddle.net/CCMyf/47/


2

Чи можете ви додати margin: 0 auto;до свого класу "обертати", щоб відцентрувати текст.

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

Це не працює. Ось скрипка, оновлена ​​"margin: 0 auto": jsfiddle.net/CCMyf/3 . Ви бачите, що "?" у "Центрування?" набагато ближче до верху, ніж "С" до низу.
danvk

2

Відповідь від "bjnsn" хороша, але не досконала, оскільки не вдається, коли текст містить у ній пробіл. Наприклад, він використовував "По центру?" як текст, але якби ми змінили текст, щоб припустити "Відцентрований? чи ні ', тоді це не спрацює нормально і займе наступний рядок після пробілу. Для внутрішнього блоку div не визначено ширину чи висоту.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Але ми можемо зробити так, щоб текст повністю вирівнювався по центру, встановивши внутрішню ширину div, рівну висоті зовнішнього div, висоту рядка внутрішнього div дорівнює ширині зовнішнього div та встановлення властивості display flex для внутрішнього div з властивостями align-items: center і justify-content: center.

.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');
});

оновлена ​​скрипка https://jsfiddle.net/touqeer_shakeel/cjL21of5/


1

Іншим варіантом обертання тексту на 90 градусів і центру по осі Y є:

.rotate-centered {
    top: 50%;
    right: 50%;
    position: absolute;
    transform: scale(-1) translate(-50%, 50%);
    writing-mode: vertical-lr;
 }
<span class="rotate-centered">Text<span>

Приклад: https://codepen.io/wwwebman/pen/KKwqErL

Але через погану підтримку IE / EDGE writing-modeтам НЕ працює: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode


0

Видалення: margin-top: -7px;з .innerзроблено вертикально повернутий текст, відцентрований для мене. Це також зробило горизонтальний текст нецентрованим.

Просто видаліть наведений вище код?


Це може наблизити його до центрування, але він все ще неправильно відцентрований. Видно це видно в цій версії скрипки: jsfiddle.net/CCMyf/4
danvk

0

Ви можете додати це:

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

До вашої .on('change')функції, як ви можете бачити тут: http://jsfiddle.net/darkajax/hVhbp/


Це працює, хоча я б дуже віддав перевагу рішенню CSS, якщо це можливо.
danvk

Ви знайшли рішення CSS?
Крашалот
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.