CSS căn trái và phải. CSS - Căn chỉnh theo chiều ngang. nhẫn vàng của Nga

Tài sản Căn chỉnh văn bản CSS chịu trách nhiệm căn chỉnh văn bản theo chiều ngang, cũng như hình ảnh và các thành phần khác. Chỗ nghỉ có 4 những lựa chọn khả thi căn chỉnh.

Cú pháp căn chỉnh văn bản CSS

...căn chỉnh văn bản: trung tâm | biện minh | trái | đúng | thừa kế; ...

center - căn chỉnh vào giữa khu vực (ví dụ: chiều rộng của khu vực là 500 pixel, nghĩa là căn chỉnh sẽ dọc theo một đường 250 pixel)
biện minh - kéo dài văn bản trên toàn bộ chiều rộng của khu vực
căn trái - trái
căn lề phải - phải
kế thừa - chấp nhận giá trị của tổ tiên (cha mẹ)

Thông thường các thuộc tính này được sử dụng trong các khối

và đoạn văn

Ghi chú:
Ngoài ra còn có thuộc tính căn chỉnh theo chiều dọc, dùng để kiểm soát việc căn chỉnh theo chiều dọc.

Cách căn chỉnh văn bản trong html

Ví dụ số 1.

Căn chỉnh văn bản sang trái. Hợp lệ theo mặc định.

Căn chỉnh văn bản sang trái

Căn chỉnh văn bản sang trái

Ví dụ số 2. Căn chỉnh văn bản và hình ảnh vào giữa

Căn chỉnh văn bản vào giữa. Thường dùng để làm tiêu đề bài viết hoặc để hiển thị hình ảnh ở giữa.

Căn chỉnh văn bản ở giữa

Trang này chuyển đổi thành như sau

Căn chỉnh văn bản sang trái

Ví dụ số 3. Căn chỉnh văn bản sang phải

Căn chỉnh văn bản sang bên phải.

Căn chỉnh văn bản sang phải

Trang này chuyển đổi thành như sau

Căn chỉnh văn bản sang phải

Ví dụ số 4. Căn chỉnh văn bản theo chiều rộng của toàn bộ khu vực

Căn chỉnh văn bản theo chiều rộng đầy đủ. Hóa ra việc căn chỉnh xảy ra ở cả trường và cạnh phải. Trình duyệt tự động thêm khoảng trắng.

Trang này chuyển đổi thành như sau

Căn chỉnh văn bản theo chiều rộng của toàn bộ khu vực

Đôi khi căn chỉnh văn bản: căn chỉnh; có thể không hoạt động. Điều này liên quan đến tính kế thừa và thậm chí cả cách trình duyệt hoạt động. Nói chung, không nên sử dụng tùy chọn này.

Ghi chú

Thay vì thuộc tính căn chỉnh văn bản bạn cũng có thể sử dụng thuộc tính căn chỉnh, được viết cùng với thẻ. Nó có thể được sử dụng với nhiều thẻ khác nhau. Ví dụ:

Căn giữa

Căn chỉnh văn bản theo chiều rộng của toàn bộ khu vực
... ...

Sự khác biệt về thẻ

Và

Thực tế là cái sau thực hiện chuyển đổi sang dòng mới(đệm dọc), nhưng div thì không.

Trong bài viết này tôi sẽ hướng dẫn bạn cách đặt một khối div làm trung tâm. Có nhiều cách, nhưng không phải tất cả chúng đều cho phép bạn thực hiện chính xác những gì được yêu cầu. Tôi sẽ đưa ra ví dụ về các phương pháp tốt nhất và đơn giản nhất.

Nói chung có hàng tá cách căn chỉnh cho hợp lý khối divở giữa, mỗi quản trị viên web sử dụng mục yêu thích\nhất của mình Một cách thuận tiện. Nhưng tuy nhiên, có một số phương pháp cơ bản, phổ biến nhất và phổ biến. Và tất nhiên, hợp lệ theo tất cả các tiêu chuẩn hiện đại.

Và vâng, cần phải nói ngay rằng những phương pháp này có thể không hoạt động trong ie6 hoặc thứ gì đó tương tự. Tôi thậm chí không chú ý đến trình duyệt này, cho dù có bao nhiêu người sử dụng nó. Đã đến lúc ngừng sử dụng những thứ cũ.

Vậy chúng ta có gì?

Cách 1. Tuyệt vời nhất

lề:0 tự động;

Rất phương pháp hiệu quả, điều này cũng cho phép bạn căn chỉnh các khoảng thụt lề ở trên cùng và dưới cùng. Bí quyết của phương pháp này là gì? Mọi thứ thật điên rồ. Chúng tôi có một khối có chiều rộng nhất định (tính bằng pixel hoặc phần trăm), mà chúng tôi đặt cùng một mức thụt lề ở bên phải và bên trái bằng cách sử dụng thuộc tính “tự động” và kết quả là chúng tôi nhận được khối div ở giữa. Giá trị đầu tiên (0 trong ví dụ) là phần đệm trên cùng và dưới cùng.

Ví dụ: để căn chỉnh trên cùng, chúng tôi viết:

Lề:tự động 10px;

Để căn chỉnh trên và dưới:

Lề:10px tự động 5px;

Theo tôi, đây là điều tuyệt vời nhất Cách tốt nhất căn giữa các khối. Hơn nữa, nó hoàn toàn hợp lệ.

Cách 2. Lãi suất

Nếu khối có chiều rộng phần trăm thì chúng ta có thể căn chỉnh div làm trung tâmáp dụng phần đệm bằng nhau để đưa toàn bộ chiều rộng lên 100%. Đối với những người không hiểu, tôi sẽ chỉ cho bạn một ví dụ, cách này dễ dàng hơn:

Chúng ta có một khối có chiều rộng là 50%, để căn chỉnh nó vào giữa, chúng ta cần tạo lề tương ứng là 25% ở bên phải và bên trái. Hãy nhìn vào mã:

Không cần căng thẳng, chúng ta sẽ có một khối ở trung tâm, thẳng hàng với phép toán tầm thường (50 + 25 + 25) :)

Cách 3. Hỗn hợp

Phương pháp này đã được đề xuất trong các ý kiến người đàn ông.

Như tôi đã đề cập ở đầu bài, có rất nhiều cách để căn giữa một khối. Mọi người chọn cái mà mình thích nhất. Tôi đang chờ ý kiến và cách mới :)

Cách 4: Sử dụng khối bổ sung

Đường chiến thắng trong các bình luận:

Cả hai phương pháp đều không giải quyết được vấn đề với số float bên trong một khối nếu không biết chiều rộng của khối (ví dụ: menu).

Trong những trường hợp như vậy tôi sử dụng khối bổ sung, bao bọc khối được căn chỉnh. Phong cách là một cái gì đó như thế này:

#dop-block ( vị trí: tương đối; float: phải; phải: 50%; ) #block ( vị trí: tương đối; float: trái; trái: 50%; )

Cho đến bây giờ, chúng ta chỉ căn chỉnh các phần tử về bên trái. Chính xác hơn, bạn và tôi hoàn toàn không làm điều này và trình duyệt tự căn chỉnh các phần tử sang bên trái theo mặc định. Tất nhiên, sẽ quá nhàm chán nếu căn chỉnh mọi thứ về bên trái. Vì thế có nhiều cách khác nhau căn giữa và bên phải.

Căn chỉnh các phần tử là điều bạn chỉ cần biết khi thực hiện việc này. Điều đầu tiên bạn cần làm là gõ một trang đơn giản.

Ngày xửa ngày xưa có một thẻ

Tôi không khuyên bạn nên sử dụng nó ngay bây giờ, do có nhiều hơn phương pháp hiện đại, nhưng tôi không thể không nhắc đến nó. Nó rất, rất đơn giản để sử dụng. Mọi thứ bạn cần căn giữa đều được đặt bên trong thẻ này. Ví dụ: ở đây chúng tôi căn chỉnh tiêu đề cấp 1 vào giữa.

Bạn có thể thêm một hình ảnh, cũng được căn chỉnh vào giữa, chúng ta hãy đi tới hàng tiếp theo sử dụng thẻ
:

Tiêu đề cấp 1, căn giữa

Đó là một thẻ

, vốn đã lỗi thời, ngoài ra, trái với mong đợi của bạn về thẻ Và đơn giản là không tồn tại. Giả sử căn trái theo mặc định, căn giữa bằng thẻ , nhưng còn cái đúng thì sao?

Để giải quyết vấn đề này, các nhà phát triển đã đưa ra phương pháp phổ quát căn chỉnh phần tử HTML. Phương pháp này là sử dụng cái gọi là vùng chứa, được tạo bằng thẻ

. Nghĩa là, mọi thứ cần đặt trong một vùng chứa cụ thể đều được đặt bên trong thẻ

. Và thẻ này đã có thuộc tính " căn chỉnh", giá trị của nó xác định vị trí của vùng chứa này. Có ba giá trị: " bên trái", "trung tâm", "Phải". Theo mặc định là " bên trái“Tuy nhiên, tôi nghĩ rằng điều này không làm bạn ngạc nhiên.

Bây giờ chúng ta hãy viết cùng một cái Mã HTML, nhưng bằng cách sử dụng các thùng chứa, ngoài ra, chúng ta đừng căn chỉnh ở giữa mà ở bên phải.

Như bạn có thể thấy, mọi thứ đều hoạt động. Tôi khuyên bạn cũng nên thay đổi giá trị của thuộc tính " căn chỉnh" để xem các kiểu căn chỉnh nội dung vùng chứa khác.

Một cách khác để căn chỉnh các phần tử HTML- đây là các bảng, nhưng chủ đề này xứng đáng được thảo luận riêng, vì vậy chúng ta sẽ nói về nó trong một trong các bài viết sau.

Hiện tại, trang của bạn sẽ trông như thế này:

Tiêu đề cấp 1, căn giữa

Tiêu đề cấp 1, căn phải

Trân trọng, Mikhail Rusakova.

tái bút Nếu bạn muốn biết thêm về HTML sau đó nhìn vào của tôi khóa học miễn phí với một ví dụ về việc tạo một trang web trên HTML:

Trong CSS, một số điều tưởng chừng đơn giản lại không dễ thực hiện. Một trong những điều này là sự liên kết, tức là. khi một phần tử cần được định vị theo một cách nhất định tương đối với cái kia.

Bài viết này trình bày một số giải pháp làm sẵn, điều này sẽ giúp đơn giản hóa công việc căn giữa các phần tử theo chiều ngang và/hoặc chiều dọc.

Lưu ý: Bên dưới mỗi giải pháp là danh sách các trình duyệt cho biết phiên bản mà mã CSS được chỉ định hoạt động.

CSS - Khối căn giữa

1. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ nhất và thứ hai có kích thước động.

...

Cha mẹ ( vị trí: tương đối; ) .child ( vị trí: tuyệt đối; bên trái: 50%; trên cùng: 50%; -webkit-transform: dịch (-50%, -50%); -moz-transform: dịch (-50% , -50%); -ms-transform: dịch(-50%, -50%); -o-transform: dịch(-50%, -50% );

Chrome 4.0+
Firefox 3.6+
trình duyệt web IE 9+
Opera 10.5+
Safari 3.1+

2. Căn chỉnh một khối vào giữa khối khác. Trong trường hợp này, khối thứ hai có kích thước cố định.

Cha mẹ ( vị trí: tương đối; ) .con ( vị trí: tuyệt đối; trái: 50%; trên cùng: 50%; /* chiều rộng và chiều cao của 2 khối */ chiều rộng: 500px; chiều cao: 250px; /* Giá trị được xác định tùy theo về kích thước của nó */ /* lề trái = - width / 2 */ lề trái: -250px; lề-top = - chiều cao / 2 */ lề-top: -125px )