Căn chỉnh văn bản: căn giữa và căn chỉnh: trung tâm không hoạt động theo chiều ngang

Điều này chưa từng xảy ra với tôi trước đây. Tôi đã thử text-align: center trên tất cả các loại địa điểm và tất cả chúng đều không hoạt động. Chúng hoạt động theo chiều dọc nhưng chúng không hoạt động theo chiều ngang. Tôi đang cố gắng để có được nó làm việc cả hai chiều ngang và theo chiều dọc cho mỗi hộp.Căn chỉnh văn bản: căn giữa và căn chỉnh: trung tâm không hoạt động theo chiều ngang

Đây là mã của tôi:

.boxes { 
 
    height:100%; 
 
} 
 
.box { 
 
    width: 33%; 
 
    height: 20%; 
 
    display: -webkit-flex; 
 
} 
 
.box p { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.box1 { 
 
    background: magenta; 
 
} 
 
.box2 { 
 
    background: cyan; 
 
} 
 
.box3 { 
 
    background: yellow; 
 
} 
 
.box4 { 
 
    background: orange; 
 
} 
 
.box5 { 
 
    background: purple; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="tabletest.css" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
    <div class="boxes"> 
 
     <div class="box box1"><p>Box 1</p></div> 
 
     <div class="box box2"><p>Box 2</p></div> 
 
     <div class="box box3"><p>Box 3</p></div> 
 
     <div class="box box4"><p>Box 4</p></div> 
 
     <div class="box box5"><p>Box 5</p></div> 
 
    </div> 
 
    </body> 
 
</html>

Tôi cũng đang cố gắng để dính vào tỷ lệ phần trăm để có một thiết kế đáp ứng. CHỈNH SỬA: Điều này có vẻ giống như một bài đăng khác, nhưng câu hỏi của tôi ở đây là làm thế nào để tôi có văn bản được căn chỉnh trực tiếp ở giữa (cả theo chiều dọc và chiều ngang) trong khi vẫn giữ thứ tự các hộp.

Nguồn

2017-01-03 m_cht

Vì vậy, bạn cần màu sắc để điền vào trang có văn bản ở chính giữa? –

Leo con sư tử, về việc có thể trùng lặp, bài đăng đó hỏi về cách bạn có thể sắp xếp các khối theo chiều dọc, nhưng câu hỏi của tôi là làm cách nào để các văn bản được căn chỉnh ở giữa hộp như giải pháp thông thường của tôi không hoạt động . Tôi không thấy nó giống như thế nào. –

Deepak, màu sắc không nhất thiết phải điền vào trang, nhưng tôi muốn văn bản nằm ở giữa các hộp. –

Bạn có thể sử dụng các giải pháp sau đây, sử dụng flexbox:

.boxes { 
 
    height:100%; 
 
} 
 
.box { 
 
    width:33%; 
 
    height:20%; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items:center; 
 
    justify-content:center; 
 
} 
 
.box1 { 
 
    background: magenta; 
 
} 
 
.box2 { 
 
    background: cyan; 
 
} 
 
.box3 { 
 
    background: yellow; 
 
} 
 
.box4 { 
 
    background: orange; 
 
} 
 
.box5 { 
 
    background: purple; 
 
} 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}

<div class="boxes"> 
 
    <div class="box box1"><p>Box 1</p></div> 
 
    <div class="box box2"><p>Box 2</p></div> 
 
    <div class="box box3"><p>Box 3</p></div> 
 
    <div class="box box4"><p>Box 4</p></div> 
 
    <div class="box box5"><p>Box 5</p></div> 
 
</div>

Nguồn

2017-01-03 07:53:45

Sẽ rất hữu ích nếu bạn giải thích tại sao mã được trình bày giải quyết vấn đề của OP. – cstricklan

Set biện minh-content: center; trên lớp hộp.

Nguồn

2017-01-03 07:54:42 DeveloperDahak

Sử dụng này:

.box p { 
    align-items: center; 
    display: block; 
    text-align: center; 
    width: 100%; 
}

Nguồn

2017-01-03 07:55:28

Hãy thử các tùy chọn sau

.boxes { 
height:100%; 
} 
.box { 
    width: 33%; 
    height: 20%; 
} 
.box p { 
    text-align: center; 
} 
.box1 { 
    background: magenta; 
} 
.box2 { 
    background: cyan; 
} 
.box3 { 
    background: yellow; 
} 
.box4 { 
    background: orange; 
} 
.box5 { 
    background: purple; 
} 
* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 100%; 
}

Lưu ý: i sử dụng text-align insted của class-mục

Nguồn

2017-01-03 07:59:00 dhaveed

Cảm ơn bạn, nhưng tôi đang tìm kiếm cả căn giữa và ngang căn chỉnh, trong khi văn bản-align chỉ mang lại cho tôi một sự liên kết ngang trung tâm. Tôi đã tìm thấy câu trả lời cho câu trả lời của tôi mặc dù. –

Hãy thử điều này.

.boxes { 
    height:100%; 
} 
.box { 
    width: 33%; 
    height: 20%; 
    display: -webkit-flex; 
    position: relative; 
} 
.box p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 
.box1 { 
    background: magenta; 
} 
.box2 { 
    background: cyan; 
} 
.box3 { 
    background: yellow; 
} 
.box4 { 
    background: orange; 
} 
.box5 { 
    background: purple; 
} 
* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height: 100%; 
}

Nguồn

2017-01-03 07:59:22 Hezron

Cảm ơn, nhưng có vẻ như nó không hoạt động. Điều này hiển thị: http://imgur.com/a/cBKlc. Tôi đã tìm thấy câu trả lời cho câu hỏi của tôi mặc dù. –

Căn chỉnh văn bản: căn giữa và căn chỉnh: trung tâm không hoạt động theo chiều ngang

Trả lời

Các vấn đề liên quan