Căn chỉnh nội dung bên trong div

152

Tôi sử dụng căn chỉnh kiểu văn bản css để căn chỉnh nội dung bên trong một thùng chứa trong HTML. Điều này hoạt động tốt trong khi nội dung là văn bản hoặc trình duyệt là IE. Nhưng nếu không thì nó không hoạt động.

Cũng như tên cho thấy, về cơ bản nó được sử dụng để căn chỉnh văn bản. Các tài sản sắp xếp đã bị phản đối từ lâu.

Có cách nào khác để căn chỉnh nội dung trong html không?

html css text-align

— Hemanshu Bhojak
nguồn

Hãy cho chúng tôi biết thêm thông tin? qua mã không hoạt động trong các trình duyệt khác.

— Shoban

Bạn nên đưa ra một ví dụ về đánh dấu của bạn để mọi người biết bạn đang cố gắng làm gì. Nếu không, câu hỏi của bạn là mơ hồ.

— levik

216

text-aligns căn chỉnh văn bản và nội dung nội tuyến khác. Nó không căn chỉnh khối yếu tố trẻ em.

Để làm điều đó, bạn muốn cung cấp cho phần tử bạn muốn căn chỉnh theo chiều rộng, với lề tự động 'bên trái và bên phải. Đây là cách tuân thủ tiêu chuẩn hoạt động ở mọi nơi trừ IE5.x.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Để điều này hoạt động trong IE6, bạn cần đảm bảo Chế độ Tiêu chuẩn được bật bằng cách sử dụng DOCTYPE phù hợp.

Nếu bạn thực sự cần hỗ trợ Chế độ IE5 / Quirks, mà ngày nay bạn không thực sự, có thể kết hợp hai cách tiếp cận khác nhau để định tâm:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Rõ ràng, các kiểu được đặt tốt nhất trong biểu định kiểu, nhưng phiên bản nội tuyến chỉ mang tính minh họa.)

— hoàng tử
nguồn

2

Nếu bạn không biết chiều rộng div, thường là như vậy, giải pháp này hoạt động hoàn hảo trong tất cả các trình duyệt: matthewjamestaylor.com/blog/ Kẻ

— Artem Russakovskii

Tôi đã sử dụng <div style = "width: 100%; lề: 0 auto;"> Xin chào </ div>

— Aamol

9

Bạn cũng có thể làm như thế này:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Như Artem Russakovskii cũng đã đề cập, hãy đọc bài viết gốc của Mattew James Taylor để biết mô tả đầy đủ.

— Mahdi
nguồn

9

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

— krithi k
nguồn

1

Mặc dù đoạn mã này có thể giải quyết câu hỏi, bao gồm một lời giải thích thực sự giúp cải thiện chất lượng bài đăng của bạn. Hãy nhớ rằng bạn đang trả lời câu hỏi cho độc giả trong tương lai và những người đó có thể không biết lý do cho đề xuất mã của bạn.

— andreas

Xin lỗi, mã ở trên sẽ căn chỉnh một trung tâm div với nội dung chính

— krithi k

6

Thành thật mà nói, tôi ghét tất cả các giải pháp tôi đã thấy cho đến nay và tôi sẽ cho bạn biết lý do tại sao: Chúng dường như không bao giờ căn chỉnh nó đúng ... vì vậy đây là những gì tôi thường làm:

Tôi biết những giá trị pixel nào mà mỗi div và tỷ lệ lợi nhuận tương ứng của chúng giữ ... vì vậy tôi làm như sau.

Tôi sẽ tạo một div trình bao bọc có vị trí tuyệt đối và giá trị bên trái là 50% ... vì vậy, div này bắt đầu ở giữa màn hình, và sau đó tôi trừ đi một nửa tất cả nội dung về chiều rộng của div ... và tôi nhận được nội dung nhân rộng BEAUTIFULLY ... và tôi nghĩ rằng điều này cũng hoạt động trên tất cả các trình duyệt. Hãy tự mình thử (ví dụ này giả sử tất cả nội dung trên trang web của bạn được bọc trong thẻ div sử dụng lớp trình bao bọc này và tất cả nội dung trong đó có chiều rộng 200px):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: Tôi quên thêm ... bạn cũng có thể muốn đặt width: 0px; trên div trình bao bọc này cho một số trình duyệt không hiển thị thanh cuộn và sau đó bạn có thể sử dụng định vị tuyệt đối cho tất cả các div bên trong.

Điều này cũng hoạt động TUYỆT VỜI để sắp xếp theo chiều dọc nội dung của bạn bằng cách sử dụng hàng đầu: 50% và lề trên. Chúc mừng!

— Alexandru
nguồn

2

Đây là một kỹ thuật tôi sử dụng đã hoạt động tốt:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Mở rộng đoạn trích

— Vết máu
nguồn

2

Dưới đây là các phương pháp luôn luôn làm việc cho tôi

Bằng cách sử dụng mô hình bố trí flex :

Đặt màn hình của div cha thành display: flex;và bạn có thể căn chỉnh các phần tử con bên trong div bằng cách sử dụng justify-content: center;(để căn chỉnh các mục trên trục chính) và align-items: center;(để căn chỉnh các mục trên trục chéo).

Nếu bạn có nhiều phần tử con và muốn kiểm soát cách chúng được sắp xếp (cột / hàng), thì bạn cũng có thể thêm thuộc flex-directiontính.

Ví dụ làm việc:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Mở rộng đoạn trích

2. (phương pháp cũ hơn) Sử dụng vị trí, thuộc tính lề và kích thước cố định

Ví dụ làm việc:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Mở rộng đoạn trích

— nmak18
nguồn

1

Tất cả các câu trả lời nói về căn chỉnh ngang.

Để sắp xếp theo chiều dọc nhiều yếu tố nội dung, hãy xem phương pháp này:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Mở rộng đoạn trích

— Nicolas
nguồn

-2

Một ví dụ khác sử dụng HTML và CSS:

<div style="width: Auto; margin: 0 auto;">Hello</div>

— Diogo
nguồn

27

Không có gì bạn viết là cụ thể cho ASP.NET. Nó chỉ là HTML và CSS nội tuyến. Ý của bạn là viết ra một điều khiển máy chủ với các thuộc tính?

— giun web

1

Đã sửa. Câu trả lời bây giờ đề cập đến các công nghệ chính xác.

— jony