Tôi muốn toàn bộ khối được căn giữa trong phần cha của nó, nhưng tôi muốn nội dung của khối được căn trái.
Ví dụ phục vụ tốt nhất
Trên trang này :
ascii art nên được căn giữa (như nó xuất hiện) nhưng nó phải thẳng hàng và trông giống như "YAML".
Hoặc cái này:
tất cả thông báo lỗi sẽ thành dòng như trong bảng điều khiển.
Câu trả lời:
Đầu tiên, hãy tạo một phụ huynh divtập trung nội dung con của nó text-align: center. Tiếp theo, tạo một phần tử con divsử dụng display: inline-blockđể thích ứng với chiều rộng của các phần tử con của nó và text-align: leftlàm cho nội dung mà nó lưu giữ căn chỉnh sang trái như mong muốn.
<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
Centered<br />
Content<br />
That<br />
Is<br />
Left<br />
Aligned
</div>
</div>Đăng lại câu trả lời làm việc từ câu hỏi khác: Làm thế nào để căn giữa theo chiều ngang một phần tử nổi có chiều rộng thay đổi?
Giả sử phần tử được thả nổi và sẽ được căn giữa là một div có id = "content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
Và áp dụng CSS sau
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Đây là tài liệu tham khảo tốt về http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats
prevà "nội dung" code.
This will be centeredkhông vừa trên một dòng, nó sẽ bao bọc văn bản và kết quả là khối có chiều rộng đầy đủ nhưng văn bản nhỏ hơn chiều rộng đầy đủ, vì vậy mặc dù khối được căn giữa, nó không quan trọng vì văn bản KHÔNG phải là chiều rộng đầy đủ của khối chứa. Để biết ví dụ, hãy tham khảo sơ đồ 2a của stackoverflow.com/questions/8702802/… .
Nếu tôi hiểu rõ về bạn, bạn cần sử dụng để căn giữa một vùng chứa (hoặc khối)
margin-left: auto;
margin-right: auto;
và để căn trái nội dung của nó:
text-align: left;
Thông thường, bạn nên sử dụng tự động margin: 0 trên div như đã đề cập trong các câu trả lời khác, nhưng bạn sẽ phải chỉ định chiều rộng cho div. Nếu bạn không muốn chỉ định chiều rộng, bạn cũng có thể (điều này tùy thuộc vào những gì bạn đang cố gắng thực hiện) sử dụng lề, chẳng hạn như margin: 0 200px; , điều này sẽ làm cho nội dung của bạn có vẻ như được tập trung, bạn cũng có thể thấy câu trả lời của Leyu cho câu hỏi của tôi
Tôi đã tìm thấy cách dễ nhất để căn giữa và căn trái văn bản bên trong vùng chứa là như sau:
HTML:
<div>
<p>Some interesting text.</p>
</div>
CSS:
P {
width: 50%; //or whatever looks best
margin: auto; //top and bottom margin can be added for aesthetic effect
}
Hy vọng đây là những gì bạn đang tìm kiếm vì tôi đã mất khá nhiều thời gian tìm kiếm chỉ để tìm ra giải pháp khá cơ bản này.
<div>
<div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
<pre>
Hello
Testing
Beep
</pre>
</div>
</div>
Đây có phải là những gì bạn đang tìm kiếm? Hộp linh hoạt ...
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
align-items: center;
}
.inside{
height:100px;
width:100px;
background:gray;
border:1px solid;
}<section class="container">
<section class="inside">
A
</section>
<section class="inside">
B
</section>
<section class="inside">
C
</section>
</section>Những công việc này
<div style="display:inline-block;margin:10px auto;">
<ul style="list-style-type:none;">
<li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
<li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
<li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
<li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
</ul>
</div>