Div trung tâm css

Question

Căn chỉnh là thiết lập vị trí của phần tử hoặc nội dung của phần tử. Trong CSS có rất nhiều thuộc tính cho phép căn chỉnh (align) một số phần tử như margin, padding, text-align, position, float. Căn chỉnh giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản, hình ảnh

Nội dung chính Show

Căn giữa cho phần tử - Sử dụng lề. tự động
Căn giữa hình ảnh
Căn chỉnh văn bản theo chiều ngang - Use text-align
Căn trái/phải - Sử dụng vị trí
Căn trái/phải - Sử dụng float
Căn giữa theo chiều dọc - Sử dụng phần đệm
Căn giữa theo chiều dọc - Use line-height
Căn giữa theo chiều dọc - Sử dụng vị trí và biến đổi

At this post, Quantrimang. com sẽ cùng bạn tìm hiểu một số căn chỉnh thông thường hay sử dụng tốt nhất. Mời bạn đọc theo dõi

Căn giữa cho phần tử - Sử dụng lề. tự động

Trong CSS, để căn giữa một phần tử khối (như

), ta sử dụng thuộc tính margin có giá trị là auto để căn chỉnh phần tử nằm ở giữa so với phần tử cha của nó.

Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid purple;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử 
dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn 
lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>

Lưu ý

Căn chỉnh giữa sẽ không tạo ra hiệu ứng nếu không có thuộc tính chiều rộng (hoặc chiều rộng có giá trị là 100%) vì nó chiếm hết động lực mở rộng sẵn có, không thể căn giữa được nữa
Thuộc tính margin: auto chỉ căn giữa cho phần tử block như
,
,
đến
,
,
,
,
.. còn các phần tử inline như , , , , .. sẽ không được áp dụng.
Có thể ghi lại phần tử hiển thị khối hoặc nội tuyến bằng cách sử dụng thuộc tính hiển thị. Ví dụ. nhịp { hiển thị. khối;}

Căn giữa hình ảnh

Để căn giữa một ảnh, đặt lề trái và lề phải thành tự động và làm cho ảnh trở thành phần tử định dạng khối như đã nói ở lưu ý phía trên

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Căn giữa hình ảnh</h2>
<p>Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm 
cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.</p>

<img src="flowers-qtm.jpg" alt="Beautiful Flower" style="width:60%">

</body>
</html>

Căn chỉnh văn bản theo chiều ngang - Use text-align

Trong CSS có thuộc tính text-align cho phép căn chỉnh nội dung văn bản sẽ nằm bên trái, ở giữa hoặc bên phải của phần tử bằng các giá trị

căn chỉnh văn bản. center - center
căn chỉnh văn bản. trái - căn trái
căn chỉnh văn bản. phải - căn phải

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid purple;
}

.left {
  text-align: left;
  border: 3px solid purple;
}
.right {
  text-align: right;
  border: 3px solid purple;

</style>
</head>
<body>

<h2>Căn giữa</h2>

<div class="center">
  <p>Website Quản trị mạng</p>
</div>

<h2>Căn trái</h2>

<div class="left">
  <p>Website Quản trị mạng</p>
</div>

<h2>Căn phải</h2>

<div class="right">
  <p>Website Quản trị mạng</p>
</div>

</body>
</html>

Lưu ý. Thuộc tính text-align cũng chỉ áp dụng cho khối phần tử vì inline chỉ chiếm dụng độ rộng vừa đủ nội dung của nó

Tìm hiểu thêm về định dạng văn bản trong CSS tại đây

Căn trái/phải - Sử dụng vị trí

Một phương pháp khác để chỉnh sửa phần tử là vị trí sử dụng. tuyệt đối

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid purple;
  padding: 10px;
}

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid purple;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Căn phải sử dụng position</h2>
  <p>Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung 
  để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như 
  điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...</p>

<div class="right">
  <p>Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, 
  trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã 
  hội thông qua địa chỉ email [email protected] hoặc đăng ký tài khoản và đăng bài 
  trực tiếp trên Quantrimang.com.</p>
</div>

</body>
</html>

Căn trái/phải - Sử dụng float

Thuộc tính float cũng được sử dụng để điều chỉnh phần tử căn cứ

.right {
  float: right;
  width: 300px;
  border: 3px solid purple;
  padding: 10px;
}

Ví dụ

________số 8_______
Chú thích. Nếu một phần tử được thả nổi cao hơn phần tử cha thì sẽ gây ra hiện tượng tràn nội dung ra bên ngoài. Để giải quyết, ta sử dụng Clearfix Overflow. tự động
.clearfix {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
0
Căn giữa theo chiều dọc - Sử dụng phần đệm
Có nhiều cách để căn giữa một phần tử theo chiều dọc trong CSS. Giải thích đơn giản nhất đó là sử dụng phần đệm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
1
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
2
Để căn giữa cả chiều ngang và chiều dọc, sử dụng padding kèm theo thuộc tính text-align. trung tâm
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
3
Căn giữa theo chiều dọc - Use line-height
Bạn cũng có cách khác để căn giữa theo chiều dọc là sử dụng thuộc tính line-height với giá trị giống như thuộc tính chiều cao
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
4
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
5
Căn giữa theo chiều dọc - Sử dụng vị trí và biến đổi
Nếu không sử dụng padding và line-height như trên, bạn có thể sử dụng cách thứ ba là sử dụng vị trí và biến đổi
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
6
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid purple;
padding: 10px;
}
</style>
</head>
<body>

<h2>Căn giữa cho phần tử</h2>
<p>Để căn giữa theo chiều ngang cho một phần tử khối (như div) bạn có thể sử dụng margin: auto.</p>

<div class="center">
<p><b>Note: </b>Phần tử sau khi chiếm không gian nhất định, khoảng trống còn lại sẽ được chia đều cho hai bên lề.</p>
</div>

</body>
</html>
7
Lưu ý. Thuộc tính biến đổi không được hỗ trợ trong IE8 và các phiên bản trước đó
Bài trước. Thuộc tính Display (inline-block) trong CSS
Bài tiếp theo. Bộ kết hợp trong CSS
Thứ Hải, 27/05/2019 09. 10
4 ★ 8 👨 80. 728
#CSS
0 Bình luận
Sắp xếp theo
Delete Login to Send
Bạn nên đọc
Ngắm 'hàng béo' của Nokia
Acer format tablet Windows RT đầu năm 2013
Nikon Coolpix S230
7 tính năng cần thiết trên điện thoại thông minh
Doanh số Xbox 360 giảm mạnh trong tháng trước
Cách tạo trình thu thập dữ liệu web cơ bản với Scrapy
CSS và CSS3
TOP code CSS xếp hạng sao (Star Rating) đẹp cho website
Xem thêm
CSS và CSS3
CSS cơ bản
CSS giới thiệu
Cú pháp và Selector CSS
Vị trí đặt CSS
CSS - Màu
CSS - Nền
CSS - Đường viền
CSS - Ký quỹ
CSS - Đệm
CSS - Chiều rộng và Chiều cao
CSS - Mô hình hộp
CSS - Phác thảo
CSS - Văn bản
CSS - Phông chữ
CSS - Biểu tượng
CSS - Liên kết
CSS - Tạo danh sách
CSS - Bảng
CSS - Hiển thị
CSS - Chiều rộng tối đa
CSS - Vị trí
CSS - tràn
CSS - Float và Clear
CSS - Khối nội tuyến
CSS - Căn chỉnh
CSS - Trình kết hợp
CSS - Lớp giả
CSS - Phần tử giả
CSS - Độ mờ
CSS - Thanh điều hướng
CSS - Trình đơn thả xuống
CSS - Thư viện hình ảnh
CSS - Sprite hình ảnh
CSS - Bộ chọn thuộc tính
CSS - Biểu mẫu
CSS - Bộ đếm
CSS - Bố cục
CSS - Đơn vị
CSS - Tính đặc hiệu
nâng cao CSS
CSS - Góc bo tròn
CSS - Hình ảnh đường viền
CSS - Nhiều nền
CSS - Màu
CSS - Chuyển màu
CSS - Hiệu ứng đổ bóng
CSS - Hiệu ứng văn bản
CSS - Phông chữ web
CSS - Chuyển đổi 2D
CSS - Chuyển đổi 3D
CSS - Chuyển đổi
CSS - Hoạt hình
CSS - Chú giải công cụ
CSS - Flexbox
CSS - Nút
CSS- @media
Tạo hiệu ứng hover node bằng CSS
công nghệ
Ứng dụng
hệ thống
Game - Trò chơi
điện thoại Iphone
Android
Linux
Nền web
Đồng hồ thông minh
Chụp ảnh - Quay phim
hệ điều hành Mac
Phần cứng
SEO thủ thuật
base format
quả mâm xôi
Dịch vụ ngân hàng
Lập trình
Online service
Dịch vụ nhà mạng
Nhà thông minh
Tải xuống
Ứng dụng văn phòng
Tải game
Hệ thống tiện ích
Ảnh, đồ họa
Internet
Bảo mật, Antivirus
Họp, học trực tuyến
Video, phim, nhạc
Thư
Lưu trữ đám mây
Giao tiếp, liên lạc, hẹn hò
Support for learning
Máy ảo
Tiện ích
Khoa học
Khoa học vui
Khám phá khoa học
Bí ẩn - Chuyện lạ
Chăm sóc sức khỏe
Khoa học Vũ trụ
Khám phá thiên nhiên
Điện máy
tủ lạnh
tivi
Điều hòa
Máy giặt
Cuộc sống
Kỹ năng
Món ngon mỗi ngày
làm đẹp
nuôi dạy con
Chăm sóc nhà cửa
Kinh nghiệm Du lịch
Halloween
mẹo vặt
giáng sinh - noel
tết 2023
quà tặng
Giải trí
Là gì?
nhà đẹp
ĐỨNG ĐẦU
phong thủy
Băng hình
công nghệ
Phòng thí nghiệm của Cisco
Phòng thí nghiệm của Microsoft
Video Khoa học
Ô tô, Xe máy
Giấy phép lái xe
Làng công nghệ
Tấn công mạng
Công nghệ
new technology
Trí tuệ nhân tạo (AI)
Anh tài công nghệ
Bình luận công nghệ
Tổng hợp
Học CNTT
quiz technology
Microsoft Word 2016
Microsoft Word 2013
Word 2007
Excel 2019
Excel 2016
Hàm Excel
Microsoft PowerPoint 2019
Microsoft PowerPoint 2016
Google Trang tính - Trang tính
mẫu mã
photoshop CS6
photoshop CS5
HTML
CSS và CSS3
con trăn
Học SQL
Lập trình C
Lập trình C++
Lập trình C#
Học HTTP
Bootstrap
Máy chủ SQL
JavaScript
Học PHP
jQuery
Học MongoDB
Unix/Linux
Học Git
NodeJS
Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA
Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm
Bản quyền © 2003-2023 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép