Tôi muốn "căn giữa" văn bản và nội dung của trang web của mình. Bây giờ tôi không muốn căn chỉnh văn bản thành trung tâm, tôi vẫn muốn căn chỉnh trái nhưng tôi muốn lề quan trọng ở bên trái và bên phải để mọi thứ trông tương đối trung tâm-ish. Bạn có thể chỉ cho tôi HTML/CSS để đạt được điều này không? Cảm ơn.Nội dung trung tâm của trang web
#wrapper {
width: 800px;
margin: 0 auto;
}
<div id="wrapper">
<p>This will appear in a centered container</p>
</div>
Tôi tin rằng this có thể giúp bạn.
CSS:
#container {
max-width: 800px;
margin: 0 auto;
}
Và trong HTML, quấn tất cả mọi thứ trong:
<div id='container'>
...
</div>
(Lưu ý rằng câu trả lời này khác với của meep trong đó tôi đang sử dụng max-width để cung cấp cho một bố cục chất lỏng bên dưới 800 pixel, trong khi anh ấy đang sử dụng width để cung cấp bố cục cố định.)
... Ngoại trừ hầu hết các phiên bản của IE không biết 'chiều rộng tối đa' là gì. –
IE7 trở lên. Đối với IE6, đây là một bài viết tuyệt vời về cách đạt được điều tương tự: http://javascript.about.com/library/blwidth.htm – RichieHindle
Tạo 3 cột trên trang của bạn. Tất cả các văn bản của bạn đi vào cột trung tâm và có thể được bỏ gán.
Có một cái nhìn vào đây để ví dụ http://matthewjamestaylor.com/blog/perfect-3-column.htm
thử
#div {
margin:0 auto
};
<html>
<head>
<style type="text/css">
body {
text-align: center; /* Center in IE */
}
#content {
text-align: left; /* reset text-align for IE */
margin: 0 auto; /* Center in other browsers */
width: 800px;
}
html {
overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}
</head>
<body>
<div id="content">
content here
</div>
</body>
</html>
* UPDATE: tôi đã thêm một số CSS buộc một thanh cuộn dọc trong FF theo một số ý kiến dưới đây.
Tốt hơn là đặt text-align: center; trên một div chứa div trong trường hợp bạn đang sử dụng trình soạn thảo WYSIWYG sẽ căn giữa tất cả văn bản của bạn trong trình chỉnh sửa. –
+1 vì tôi đồng ý - tôi chỉ đưa ra ví dụ đơn giản nhất tôi có thể cho người hỏi, nhưng thực tế tôi sẽ làm chính xác như bạn đề xuất. –
Điều này hoạt động tốt, nhưng có một vấn đề nhỏ. Tôi đã áp dụng nó trên tất cả các trang của tôi và có vẻ như đối với một số trang, chúng di chuyển nhẹ sang trái/phải. Điều này gây mất tập trung khi thanh thực đơn của tôi chuyển từ trang này sang trang khác. – alamodey
Có một div container trong đó bạn đặt tất cả nội dung của bạn:
<html>
<head>
<title>a sample</title>
</head>
<body>
<div id="container">
<h1>this is it</h1>
<p>all content goes here</p>
</div>
</body>
Sau đó, thêm một số css xác định chiều rộng và lề div container của bạn:
#container {
width: 750px;
margin: 0 auto;
}
Trong một số trình duyệt, giống như IE cho ví dụ, điều này sẽ không hoạt động. Bạn sẽ phải thêm một gói div #wrapper khác để đặt text-align thành center. Trong #wrapper, bạn nên đặt text-align sang trái một lần nữa. –
Tôi chưa bao giờ gặp phải vấn đề đó? Tôi đã sử dụng một chút mã trên mỗi trang web tôi đã tạo. Với tài liệu XHTML. Nếu bạn thấy: http://dev.korebogen.dk - Nó tập trung vào tất cả các trình duyệt. Và CSS chỉ là #wrapper {width: 960px; lề: 0 tự động; } – janhartmann
Được rồi - có thể nó sẽ không tập trung vào IE5 - nhưng địa ngục, ai cũng sử dụng nó? :-) – janhartmann