trung tâm theo chiều dọc xoay văn bản với CSS

Question

Tôi có HTML sau:

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

div.outer là một dải dọc hẹp. div.inner được xoay 90 độ. Tôi muốn văn bản "Căn giữa?" xuất hiện tập trung vào div vùng chứa của nó. Tôi không biết kích thước của cả hai div trước.

Điều này đến gần: http://jsfiddle.net/CCMyf/2/. Bạn có thể thấy từ jsfiddle rằng văn bản được căn giữa theo chiều dọc trước khi áp dụng kiểu transform: rotate(-90deg), nhưng phần nào được bù đắp sau. Điều này đặc biệt đáng chú ý khi div.outer ngắn.

Có thể căn giữa văn bản này theo chiều dọc mà không biết bất kỳ kích thước nào trước không? Tôi chưa tìm thấy bất kỳ giá trị nào của transform-origin giải quyết vấn đề này.

Answer 1

Điều quan trọng là để thiết lập vị trí hàng đầu và rời khỏi đến 50% và sau đó transformX và transformY đến -50%.

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

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

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

Answer 2

Bạn có thể thêm margin: 0 auto; vào lớp "xoay" để căn giữa văn bản hay không.

.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 3

Xóa: margin-top: -7px; từ .inner làm văn bản xoay theo chiều dọc làm trung tâm cho tôi. Nó cũng làm cho văn bản nằm ngang không được căn giữa.

Chỉ cần xóa mã ở trên?

Answer 4

Bạn có thể thêm này:

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

Để chức năng .on('change') của bạn, như bạn thấy ở đây: http://jsfiddle.net/darkajax/hVhbp/

Answer 5

Nó có thể là hơi muộn để trả lời câu hỏi đó, nhưng tôi vấp vào cùng một vấn đề và tìm thấy một số cách để đạt được nó, bằng cách thêm một div khác trong cách.

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

và áp dụng một text-align: center vào đó yếu tố trung, cùng với một số công cụ định vị:

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

Các .inner cũng được một display: inline-block; để cho phép cả hai rotate và text-align tài sản.

Đây là fiddle tương ứng: http://jsfiddle.net/CCMyf/47/

Answer 6

Câu trả lời từ 'bjnsn' là tốt nhưng không hoàn hảo như nó không thành công khi văn bản chứa không gian trong đó. Ví dụ: anh ấy đã sử dụng 'Căn giữa?' dưới dạng văn bản nhưng nếu chúng tôi thay đổi văn bản để giả sử 'Căn giữa? hoặc không 'sau đó nó sẽ không hoạt động tốt và sẽ có dòng tiếp theo sau không gian. Ther không phải là chiều rộng hoặc chiều cao được xác định cho khối div bên trong.

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

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ Nhưng chúng ta có thể làm cho toàn bộ văn bản class trung đúng cách, bằng cách thiết lập chiều rộng div bên trong bằng chiều cao của div bên ngoài, line-height của nội div tương đương với chiều rộng của bên ngoài thiết lập div và thuộc tính flex hiển thị cho div bên trong với các mục thẳng hàng: center và justify-content: các thuộc tính trung tâm.

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

cập nhật fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/