Căn chỉnh văn bản trong CSS: thuộc tính text-align

Ví dụ: trong các chương trình như Microsoft Word, bạn có thể đã gặp các công cụ để căn chỉnh văn bản theo chiều ngang. Bạn có thể căn chỉnh văn bản sang trái hoặc phải, căn giữa hoặc căn đều. Điều này cũng đúng trong CSS - căn chỉnh văn bản được thực hiện bằng cách sử dụng thuộc tính text-align và các giá trị tương ứng, được hiển thị trong bảng:

Ví dụ về một mục phong cách:

P ( căn chỉnh văn bản: trái; )

Giá trị trái, phải và giữa Văn bản căn trái hầu như luôn trông đẹp trên các trang web và dễ đọc. Căn chỉnh bên phải trong các ngôn ngữ Châu Âu, theo quy luật, hiếm khi được sử dụng, nhưng không thể gọi là hoàn toàn vô dụng: kiểu này rất hữu ích để thiết kế đẹp mắt chú thích cho ảnh hoặc trích dẫn, căn chỉnh nội dung của các ô trong bảng hoặc các đoạn văn bản nhỏ. Giá trị trung tâm thường được sử dụng cho cùng mục đích. Giá trị căn đều Căn đều văn bản trong CSS có thể được sử dụng cho các phiên bản in của trang, nhưng không nên sử dụng phong cách này trên các trang web được thiết kế để xem hiển thị. Tại sao? Thoạt nhìn, văn bản căn đều trông đẹp và đều, giống như một chuyên mục trên một tờ báo. Nhưng để kéo dài văn bản theo cách này, trình duyệt phải thêm khoảng trắng giữa các từ, điều này có thể tạo ra những khoảng trống khó coi trong văn bản, gây khó đọc. Trong các chương trình được thiết kế để chuẩn bị dữ liệu để in, khoảng cách trong văn bản được điều chỉnh tốt hơn nhiều và cũng thường sử dụng tính năng ngắt dòng, tính năng này không có sẵn trong nhiều trình duyệt. Vì vậy, cần phải kiểm tra xem văn bản căn đều trên các trang web trông như thế nào và câu hỏi đầu tiên bạn nên tự hỏi mình là: nó có dễ đọc không? Điều này đặc biệt đúng đối với các khối văn bản hẹp (bao gồm cả phiên bản trang dành cho thiết bị di động). Giá trị bắt đầu và kết thúc Giá trị bắt đầu và kết thúc cho thuộc tính text-align được triển khai trong CSS3 và hoạt động gần giống như left và right, nhưng có một sự khác biệt. Bằng cách áp dụng giá trị bắt đầu cho văn bản chạy từ trái sang phải (LTR) thì căn lề sẽ là trái (tương ứng, đối với văn bản chạy từ phải sang trái (RTL) thì căn lề sẽ là phải). Điều hợp lý là giá trị cuối hoạt động theo cách ngược lại (nghĩa là nó căn chỉnh văn bản LTR ở bên phải và văn bản RTL ở bên trái). Hai giá trị này không được một số trình duyệt hỗ trợ, bao gồm cả Internet Explorer, vì vậy trừ khi bạn thực sự cần sử dụng chúng, chúng tôi khuyên bạn nên sử dụng giá trị bên trái và bên phải.

Ảnh chụp màn hình hiển thị ví dụ về cách sử dụng các giá trị khác nhau cho thuộc tính CSS text-align:

Ảnh chụp màn hình 1: Căn chỉnh văn bản LTR sang trái bằng giá trị bắt đầu. Có thể đạt được giao diện tương tự bằng cách sử dụng giá trị bên trái.
Ảnh chụp màn hình 2: Căn chỉnh văn bản LTR sang phải bằng giá trị cuối. Bạn có thể đạt được giao diện tương tự bằng cách sử dụng giá trị phù hợp.
Ảnh chụp màn hình 3: Căn chỉnh văn bản theo chiều rộng. Với phông chữ nhỏ và chiều rộng trang/khối lớn, tùy chọn căn chỉnh văn bản trên trang web này có vẻ chấp nhận được.
Ảnh chụp màn hình 4: kích thước phông chữ đã được tăng lên và độ rộng khối đã giảm so với ví dụ trước. Như bạn có thể thấy, những khoảng trống xấu xí đã xuất hiện trong văn bản (được gạch chân bằng đường màu đỏ).
Ảnh chụp màn hình 5: hai cách để căn chỉnh văn bản bằng ví dụ về phiên bản di động trong hướng dẫn của chúng tôi (ở bên trái - text-align: left, ở bên phải - text-align:just). Hãy thử đọc văn bản ở cả hai cột và xác định xem tùy chọn nào dễ đọc hơn.

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 giữa chính xác khối div; mỗi quản trị viên web sử dụng phương pháp yêu thích/thuận tiện nhất của mình. 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 để ý đến trình duyệt này, bất kể 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;

Một phương pháp rất hiệu quả, cũng cho phép bạn căn chỉnh các khoảng thụt lề ở trên và dưới. 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 “auto” 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ề:10px tự động;

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

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

Theo tôi đây là 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 thức 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ă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%; )

Hầu hết chúng ta đều đã có ý tưởng rõ ràng về một trang được thiết kế hoàn hảo kể từ khi còn đi học. Sự phân bố đều các chữ cái, dòng chữ mảnh, một hình chữ nhật chặt chẽ của văn bản được đóng khung bởi các lề đều nhau - đây chính xác là hình ảnh mà chúng ta nhìn thấy khi xem qua bất kỳ ấn phẩm in nào. Có một sự cám dỗ lớn để mô tả một cái gì đó tương tự trên một trang web, đặc biệt là vì một phương tiện nổi tiếng được đề xuất cho việc này - căn chỉnh văn bản theo chiều rộng. Tuy nhiên, điều tốt cho một người đánh máy lại là một tội lỗi lớn đối với một nhà thiết kế web. Và tất cả là bởi vì, khi áp dụng vào đánh dấu trang web, chức năng này trở nên phát triển quá mức với rất nhiều thiếu sót đến nỗi ưu điểm duy nhất của nó là cạnh phải mượt mà chỉ đơn giản là mờ nhạt trước mắt chúng ta. Đây chỉ là một vài lý do tại sao bạn nên bỏ biện minh mà ủng hộ việc căn lề trái.

Sự lộn xộn có thể nhìn thấy bên trong một khối văn bản

Vâng, vâng, các cạnh của khối văn bản càng mượt mà thì sự lộn xộn bên trong nó càng rõ ràng. Trong kiểu chữ, toàn bộ kho công cụ cho phép bạn đạt được tính nhất quán trong văn bản: gạch nối, điều chỉnh khoảng cách giữa các từ và khoảng cách giữa các chữ cái, thậm chí các tùy chọn phông chữ rộng hơn hoặc hẹp hơn một chút. Nhưng bố cục của một trang Internet, theo quy luật, chỉ có một cách để "kéo dài" một dòng từ mép này sang mép kia - sự gia tăng không kiểm soát về chiều rộng của khoảng trắng. Điều này không chỉ dẫn đến sự xuất hiện những khoảng trống mất thẩm mỹ giữa các từ mà những khoảng trống này, như theo quy luật về ý nghĩa, thường rơi vào những vị trí gần như giống nhau trong mỗi dòng, tạo thành cái gọi là những “sông” thẳng đứng. Tất cả điều này mang lại cho văn bản một diện mạo rất lộn xộn.

Không thể đọc được

Nhưng nếu tính thẩm mỹ vẫn có thể bị hy sinh vì các cạnh gọn gàng, thì những vấn đề hiển nhiên về nhận thức trực quan về văn bản vẫn là một cái giá quá cao phải trả cho chúng. Và về mặt khách quan, văn bản căn đều khó đọc hơn nhiều so với văn bản căn trái. Nguyên nhân chính nằm ở khoảng cách giữa các từ tăng lên như nhau: mắt liên tục buộc phải tìm phần đầu của từ tiếp theo và do sự khác biệt về khoảng cách giữa các dòng nên nó cũng buộc phải điều chỉnh từ khoảng cách này sang khoảng cách khác. .

Cần phải làm việc theo chiều dài dòng, thường không có kết quả

Công bằng mà nói, cần lưu ý rằng những nhược điểm đã xác định của văn bản căn đều có thể được giảm bớt bằng cách tăng độ dài dòng. Tuy nhiên, phương pháp này không phải lúc nào cũng hiệu quả. Nhưng nó có thể làm giảm khả năng đọc với xác suất rất cao: rất khó cho mắt khi quét một dòng dài đến cuối để chuyển sang phần đầu của dòng tiếp theo một cách chính xác và nhanh chóng.

Không phù hợp với thiết bị di động

Cột có văn bản càng hẹp thì càng ít phải căn chỉnh. Và ở đây, định dạng này xung đột trực tiếp với yêu cầu của thiết bị di động, ngược lại, dòng càng ngắn thì càng tốt. Đồng ý rằng, việc dùng mắt theo dõi một dòng dài trên màn hình toàn màn hình là một chuyện và việc cuộn đi cuộn lại từng dòng lại là một điều khác. Một niềm vui không rõ ràng, nhưng chắc chắn là cách để đánh mất khán giả trên thiết bị di động của bạn!

Có vẻ như nếu chúng ta có thể thêm chức năng ngắt dòng vào trang thì tất cả những vấn đề phát sinh khi căn chỉnh văn bản theo chiều rộng của trang sẽ được giải quyết. Nhưng điều đáng chú ý là đánh dấu HTML không cung cấp chức năng như vậy. Vì vậy, hóa ra ngày nay không có cách nào khác để duy trì khoảng cách chấp nhận được giữa các từ trên trang web ngoài việc căn chỉnh văn bản cho sát mép.

Vì vậy, khi tạo một trang Internet, điều quan trọng cần nhớ là: trang web không phải là một cuốn sách và bạn cần tiếp cận thiết kế của nó từ các vị trí do công nghệ và tâm lý nhận thức quyết định chứ không phải theo quan điểm thẩm mỹ của ai đó, tuy nhiên, rất, rất có điều kiện. Tin tôi đi, nếu văn bản của bạn được đặt gọn gàng và trên hết, có thể đọc được một cách dễ dàng và hài lòng, thì sẽ không ai chú ý đến một chuyện vặt vãnh như lề không đều nhau!

Nhân tiện, khi bạn đọc bài viết này, bạn có nhận thấy văn bản này không hợp lý không?

Cách căn chỉnh văn bản trong Word 2 cạnh bằng nhiều cách

Word là trình soạn thảo phổ biến nhất. Nó cung cấp cho người dùng rất nhiều khả năng, giúp công việc của họ trở nên đơn giản và dễ dàng hơn. Để sử dụng chúng, hãy nghiên cứu kỹ chương trình, tìm hiểu mọi bí mật của nó.

Bạn có muốn biết cách kiếm tiền trực tuyến liên tục từ 500 rúp mỗi ngày không?
Tải xuống cuốn sách miễn phí của tôi
=>>

Khi làm việc với văn bản, người ta đặc biệt chú ý đến vị trí của nó. Thông thường, trình soạn thảo sẽ tự động căn lề trái. Bạn có thể thay đổi vị trí của văn bản bằng các nút đặc biệt.

Một số người dùng không biết điều này, cố gắng đặt văn bản ngay cả khi sử dụng dấu cách. Phương pháp này không thuận tiện và mất nhiều thời gian. Hơn nữa, hầu như không thể căn chỉnh chính xác văn bản “bằng mắt”. Nếu bạn đang viết một luận văn mà định dạng đóng vai trò quan trọng thì nó có thể không được chấp nhận.

Cách căn chỉnh văn bản trong Word 2 cạnh chính xác

Để đảm bảo rằng văn bản đều ở cả hai cạnh, hãy sử dụng căn lề.

Tab Trang chủ

Bạn có thể căn chỉnh văn bản trên cả hai cạnh bằng menu chính của trình chỉnh sửa. Có một số nút trong phần Đoạn văn. Để đảm bảo văn bản được định vị đồng đều ở cả cạnh trái và phải, hãy chọn văn bản đó và nhấp vào nút “vừa với chiều rộng”. Văn bản sẽ được căn chỉnh bằng cách tạo thêm khoảng cách.

Danh mục

Có một cách khác để làm cho văn bản đều nhau ở cả hai mặt. Sau khi chọn văn bản, sử dụng nút chuột phải, nhấp chuột và trong menu ngữ cảnh xuất hiện, nhấp vào “Đoạn”. Một cửa sổ sẽ xuất hiện nơi bạn cần chọn căn chỉnh “chiều rộng”.

Phím

Có các phím tắt đặc biệt cho phép bạn đặt văn bản theo yêu cầu. Để làm cho văn bản đều trên cả hai mặt, hãy chọn văn bản và nhấn phím “CNTR + J” cùng lúc. Nếu phím không hoạt động thì cài đặt của bạn đã bị thay đổi.

Tùy chọn bổ sung

Chỉ nhấp vào các nút đặc biệt có thể không đủ để căn chỉnh văn bản một cách chính xác. Bạn có thể cần gạch nối các từ và tiến hành kiểm tra bổ sung.

Dấu gạch nối

Có những trường hợp khi căn chỉnh, khoảng cách giữa các từ tăng lên nhiều đến mức văn bản trông thật lố bịch. Ngăn chặn điều này bằng cách tạo dấu gạch nối.

Mở phần “Bố cục trang”, nhấp vào “Dấu gạch nối” và chọn “Tự động”.

Kiểm tra tính đúng đắn của việc đăng ký

Bạn có thể kiểm tra bất kỳ lúc nào xem tác phẩm của bạn có được định dạng chính xác hay không và sửa nó. Trong tab “Trang chủ”, hãy nhấp vào nút. Bạn sẽ thấy có nhiều khoảng trống do xuất hiện một số lượng lớn các dấu chấm.

Cách căn lề văn bản trong Word, tóm tắt

Việc căn chỉnh chữ trong Word 2 cạnh khá đơn giản. Bắt đầu nghiên cứu trình soạn thảo và bạn sẽ làm cho công việc của mình dễ dàng hơn. Chúc các bạn thành công trong việc tiếp thu kiến ​​thức mới!

tái bút Tôi đính kèm ảnh chụp màn hình thu nhập của tôi trong các chương trình liên kết. Và tôi nhắc bạn rằng bất kỳ ai cũng có thể kiếm tiền theo cách này, ngay cả người mới bắt đầu! Điều quan trọng là phải làm điều đó một cách chính xác, có nghĩa là học hỏi từ những người đã kiếm được tiền, tức là từ các chuyên gia kinh doanh Internet.

Nhận danh sách các Chương trình liên kết đã được chứng minh là có thể trả tiền vào năm 2017!


Tải xuống danh sách kiểm tra và các phần thưởng có giá trị miễn phí
=>>

Html có một tham số chung và nó được gọi là ALIGN. Nó có thể được sử dụng với nhiều thẻ html khác nhau:

p | h1 | div | bàn | đầu | tbody | chân | tr | th | td

Những giá trị khả thi:

Trung tâm- căn chỉnh trung tâm
Bên trái- căn lề trái
Phải- Phía bên phải
biện minh- về chiều rộng, dọc theo các cạnh trái và phải. Trong trường hợp này, khoảng cách lớn có thể xuất hiện giữa các từ.

Văn bản được căn chỉnh theo chiều rộng

Xuất hiện trong trình duyệt:

Tiêu đề được căn giữa

Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng. Văn bản được căn chỉnh theo chiều rộng.

Nội dung của khối này được căn chỉnh về phía bên phải

Xin lưu ý rằng việc căn lề trái diễn ra tự động. Do đó, không cần chỉ định giá trị như vậy cho tham số căn chỉnh.