Tìm hiểu cách căn trái, phải và căn giữa văn bản trong HTML để bạn có thể tạo bố cục trang web có tổ chức, được thiết kế tốt ngay từ đầu.

Bạn đang xem : căn chỉnh văn bản mã html

Trong thiết kế web, chi tiết rất quan trọng. màu , biểu tượng và kiểu chữ mà bạn chọn đều ảnh hưởng đến khả năng đọc nội dung của bạn , cũng như cách bạn căn chỉnh văn bản trên trang.

Trên thực tế, có những nguyên tắc căn chỉnh trong thiết kế để tạo ra các thiết kế có tổ chức, hợp lý và dễ đọc. Được gọi là căn chỉnh cạnh và trung tâm, những nguyên tắc này nêu rõ rằng các yếu tố phải được tổ chức tương ứng với “một đường vô hình” hoặc lề.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Dưới đây là ví dụ về danh thiếp tuân theo các nguyên tắc này và bao gồm văn bản căn trái, căn phải và căn giữa.

Nguồn hình ảnh

Để có được giao diện cân đối tương tự trên trang web của mình, bạn cần biết cách căn chỉnh văn bản của mình theo ba cách sau. Mặc dù hầu hết các nền tảng xây dựng trang web sẽ cung cấp các nút để đơn giản hóa quy trình này, bạn có thể đang xây dựng một trang web, ứng dụng hoặc đồ họa từ đầu hoặc trong một công cụ không có các tùy chọn này. Trong những trường hợp này, bạn cần biết cách căn chỉnh văn bản bằng mã.

Trong bài đăng này, chúng ta sẽ hướng dẫn cách căn trái, căn phải và căn giữa văn bản với HTML và CSS.

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

Vì căn chỉnh là một loại định dạng trang, nên cách tốt nhất để căn chỉnh nội dung HTML trên trang là sử dụng thuộc tính CSS text-align . text-align đặt căn chỉnh theo chiều ngang của nội dung bên trong phần tử khối (tức là phần tử bắt đầu một dòng mới và chiếm toàn bộ chiều rộng của trang, như & lt; p & gt; ) hoặc một ô trong bảng. Mặc dù tên text-align ngụ ý rằng thuộc tính này hoạt động trên văn bản, nhưng nó cũng ảnh hưởng đến tất cả các nội dung khác bên trong phần tử khối, bao gồm cả hình ảnh và nút.

Bạn có thể sử dụng thuộc tính text-align trong CSS nội tuyến, CSS nội bộ hoặc CSS bên ngoài . CSS nội tuyến có nghĩa là HTML và CSS của bạn sẽ được đặt cùng nhau trong phần nội dung của tài liệu HTML. Vì vậy, về mặt kỹ thuật, bạn sẽ căn chỉnh văn bản “trong HTML”.

Tuy nhiên, CSS bên trong và bên ngoài được đề xuất thay vì CSS nội tuyến. Điều này là do việc tách mã kiểu (CSS) khỏi mã nội dung (HTML) có nghĩa là bạn có thể dễ dàng thực hiện các thay đổi nội dung trong tương lai mà không ảnh hưởng đến kiểu trang và ngược lại.

Tài nguyên được Đề xuất

Hướng dẫn dành cho người mới bắt đầu về HTML và CSS dành cho nhà tiếp thị

Điền vào biểu mẫu để nhận hướng dẫn giới thiệu miễn phí của bạn.

Trung tâm văn bản căn chỉnh HTML

Căn chỉnh văn bản dọc theo trục chính giữa là điều phổ biến trên các trang web. Tuy nhiên, trong khi nó làm cho trang trông có tổ chức và đối xứng, thì việc căn giữa mọi thứ trên trang có thể gây nhàm chán. Ngoài ra, việc căn giữa các đoạn văn bản lớn có thể khiến việc đọc trở nên khó khăn hơn.

Do đó, căn chỉnh giữa nên được lưu cho tiêu đề, dấu ngoặc kép, nút gọi hành động và các yếu tố khác làm gián đoạn luồng tài liệu để thu hút sự chú ý của người đọc.

Xem Thêm  Cảm âm bài proud of you

Dưới đây là một ví dụ về việc sử dụng căn giữa trên các yếu tố quan trọng nhất trên trang chủ của bạn:

Nguồn hình ảnh

Giả sử tôi đang xây dựng một trang web và tôi muốn căn giữa tiêu đề của mình, nhưng giữ mọi thứ khác căn trái. Tôi có thể sử dụng quy tắc text-align: center trên các tiêu đề để đạt được điều này:

Xem Pen text-align: center 1 của Christina Perricone ( @hubspot ) trên CodePen .

Bây giờ, giả sử tôi muốn căn giữa một phần tử nút trên trang. Vì nút HTML là phần tử nội dòng, không phải phần tử cấp khối, nên không thể sử dụng thuộc tính text-align trực tiếp trên nút để căn giữa. Thay vào đó, chúng tôi có thể đặt nút bên trong div, phần tử cấp khối chung , sau đó áp dụng text-align: center cho vùng chứa div này:

Xem Bút text-align: center 2 bởi Christina Perricone ( @hubspot ) trên CodePen .

Cần một hình ảnh? Video này giải thích chi tiết hơn tất cả các bước này.

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

Căn chỉnh văn bản so với lề bên trái là loại căn chỉnh phổ biến nhất vì nó bắt chước cách hầu hết mọi người đọc, từ trái sang phải. (Lưu ý rằng các trang web được đặt bằng một số ngôn ngữ nhất định, bao gồm tiếng Ả Rập, tiếng Do Thái, tiếng Ba Tư và tiếng Urdu, sẽ có hướng mặc định khác.)

Căn trái đặc biệt hiệu quả để định vị các đoạn văn dài trên một trang vì nó tạo ra một cạnh thẳng, nơi người đọc bắt đầu mỗi dòng văn bản mới. Ngược lại, căn phải và căn giữa, tạo ra một cạnh răng cưa yêu cầu người đọc bắt đầu mỗi dòng văn bản mới ở một điểm hơi khác một chút. Điều này làm chậm quá trình đọc.

Hãy thử đọc các đoạn văn sau để xem cách căn lề nào giúp đoạn văn dễ đọc nhất. Nếu bạn giống như hầu hết người đọc tiếng Anh, bạn sẽ thích căn lề trái hơn.

HTML căn chỉnh nội dung ở bên trái theo mặc định, vì vậy trong nhiều trường hợp, bạn sẽ không cần sử dụng thuộc tính text-align để đạt được hiệu ứng này.

Xem Pen text-align: left 1 của Christina Perricone ( @hubspot ) trên CodePen .

Tuy nhiên, bạn có thể gặp phải các trường hợp khi bạn muốn căn trái một phần nội dung bên trong một phần tử được đặt thành một căn chỉnh khác, chẳng hạn như phải hoặc chính giữa. Vì vậy, vẫn tốt nếu bạn biết cách thực hiện.

Để căn trái trong CSS, hãy sử dụng quy tắc CSS text-align: left . Trong ví dụ dưới đây, phần tử div được đặt ở giữa tất cả nội dung bên trong nó. Tuy nhiên, khi chúng tôi áp dụng text-align: left cho đoạn thứ hai, điều này sẽ ghi đè kiểu của div:

Xem Pen text-align: left 2 của Christina Perricone ( @hubspot ) trên CodePen .

HTML Align Text Right

Căn chỉnh văn bản so với lề bên phải là kiểu căn chỉnh ít phổ biến nhất vì nó mâu thuẫn với cách hầu hết mọi người đọc văn bản. Mặc dù đòi hỏi nhiều nỗ lực hơn để đọc, nhưng văn bản hợp lý – khi được sử dụng một cách chiến lược – có thể tạo ra vẻ ngoài độc đáo cho bìa tạp chí, sơ yếu lý lịch, thơ, áp phích, danh thiếp hoặc nội dung dạng ngắn khác của bạn.

Dưới đây là một ví dụ về hiệu ứng nổi bật mà văn bản căn phải có thể có:

Nguồn hình ảnh

Giả sử chúng tôi muốn căn chỉnh phải tất cả các tiêu đề trên trang. Chúng tôi có thể áp dụng quy tắc CSS text-align: right cho tất cả các H2 để căn chỉnh chúng:

Xem Thêm  Học lập trình trực tuyến - tính đa hình trong c++

Xem Bút ký text-align: right của Christina Perricone ( @hubspot ) trên CodePen .

Căn chỉnh văn bản của bạn bằng HTML & amp; CSS

Nếu bạn có một số kiến ​​thức cơ bản về thiết kế web, bạn có thể thay đổi căn chỉnh của văn bản. Điều này có thể giúp bạn xây dựng và tùy chỉnh bố cục trang của mình và làm cho nội dung của bạn dễ đọc hơn. Chỉ cần đảm bảo rằng cuối cùng, các căn chỉnh của bạn phục vụ trải nghiệm đọc.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 8 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề căn chỉnh văn bản mã html

How to Vertically Align Text in CSS

alt

  • Tác giả: EZ Tutorials
  • Ngày đăng: 2016-09-10
  • Đánh giá: 4 ⭐ ( 2776 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hi, vertically align text in CSS? No problem, I prepared five methods to use when you want your text to be centered. Which one is the best?

    ► Get Filip a coffee so he can work longer at night 🙂
    https://www.buymeacoffee.com/FilipDelac

    ► LET’S CONNECT:
    Facebook: https://www.facebook.com/filipdelac2
    Linkedin: https://www.linkedin.com/in/filip-delac/

    Project Resources:

    http://www.mediafire.com/download/j5xc5sr6wst27dl/Project_Files.7z

    Tools:

    Brackets, FREE code editor
    http://brackets.io/

    Emmet, super speed coding addon
    http://emmet.io/

    Beautify, turning your ugly code into beautiful script
    https://github.com/brackets-beautify/brackets-beautify

    Transcription

    Hello hello, and welcome to another tutorial. Today we will learn how to vertically align text in CSS using five methods. Method one is a classic one, it will only vertically align one row of text so to see this let’s make one div with the class container, it will be container one and one p tag with the class text1. Okay, and let’s add some text inside Lorem Ipsum… and let’s trim a bit so we have only one line. And the in our main CSS we will add some styling for our container1, we will add a background color of white, just to better see in our preview pane on the right side. And this is very simple method, so just use on your text text1, just use just use height of a 100 pixels, for example, and line-height, height of 100 pixels, and as you can see this is, our text is in the center, but if we add another line of text over here, it will break. As you can see over here, So this works only for one row. Okay, I just add the method2, method2 will be the upgrade of a method one so we just add again our container and text paragraph. Okay, just copy this from the method1, and paste it down there and change the number two and text two, so it will be easy to do work with. In our CSS we got our container2, container2, and text2. As you can see, we will now add to the container to this, this code will add height and line-height of 100 pixels and as you can see, our text is in the center, aligned in the center, but as you can see if we also add one additional row it will break, so, to be able to add additional row we need to add to our text2 display in-line, in-line block, and this say: vertical align middle, as you can see, nothing still happens because nothing will happen until you add a line-height: normal. And as you can see on the right side, our method works, and it’s in the center so let’s check with another row, just say Lorem… Tad-da 🙂 as you can see our text is the in the center again. In method three we will use table illusion to vertically align our text. So, just copy this code up here, your container and text2, and paste it down here, and just change the the numbers here 3, and to do this we need to set for our container3 to display a table, table, and now we said to our container to act as a table is a table. We can say our height is 300 pixels and the background color to be to also be white. And on our text3 we add display table cell, as you can see. We now treat our text3 as a table cell, and the only thing you need to add is a vertical, vertical-align: middle; and this is it. You can change the height over here for 100 pixels and so on. As you can see our text is in the middle, vertically aligned perfectly, and we can have multiple rows. Method 4 is my favorite one next to a method five, that’s why I left them for the end of this tutorial, and because I like them so much because they need so little coding, so, let’s for example, add in our index.html let’s just copy paste, as usual, o our code, and paste it down there change this to number four, so we don’t have to write all over again, and we use padding. So, it will be just in our container, container4, we just add a background color, just to see it better. These pretty white color, and just add padding. Padding-top and bottom padding to be the same, for example, 50 pixels, and the right and the left to be zero, and as you can see, our content is centered! It is my favorite method because next to a flexbox it’s the easiest method and it works everywhere. As you can see, you can also add this padding in percents, for example, 5% so it will be always responsive. Method five is a flexbox, it’s my personal favorite next to padding.

MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- HTML (khoa công nghệ thông tin)_1 ppsx

  • Tác giả: text.123docz.net
  • Đánh giá: 5 ⭐ ( 6604 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: – Tại 123doc thư viện tài liệu trực tuyến Việt Nam

Cách để Căn giữa văn bản trên HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 3 ⭐ ( 8887 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Căn giữa văn bản trên HTML. wikiHow hôm nay sẽ hướng dẫn bạn cách căn giữa văn bản trên website HTML bằng ngôn ngữ lập trình CSS (Cascading Style Sheets). Việc căn giữa văn bản trên HTML được thực hiện bằng thẻ , nhưng thẻ này bị…

Làm cách nào để căn giữa văn bản trong hàng bảng html?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2372 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Dưới đây là một ví dụ với CSS và các stylethuộc tính nội tuyến : td…

Các thẻ định dạng chữ và văn bản trong HTML

  • Tác giả: thachpham.com
  • Đánh giá: 4 ⭐ ( 1469 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ giúp bạn định dạng và trang trí chữ viết/văn bản trong HTML thường dùng nhất,thẻ thêm màu chữ trong HTML,thêm màu nền và font chữ vào HTML

HTML căn bản

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 4624 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu về các thẻ cơ bản trong HTML : Khai báo kiểu, thẻ đề mục (h1 đến h6), đoạn văn bản (p), liên kết (a), ảnh (img).

5 bước để hiểu mã HTML cơ bản

  • Tác giả: funix.edu.vn
  • Đánh giá: 3 ⭐ ( 4535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như chúng ta đã biết, HTML là một phần quan trọng của web. Hãy cùng FUNiX tìm hiểu một số kiến thức cơ bản về ngôn ngữ này, bao gồm HTML thực sự là gì, một số khái niệm cơ bản và cách nó tương tác với các ngôn ngữ khác.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thay đổi màu phông chữ HTML - màu phông chữ html đỏ

By ads_php