You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Thuộc tính Align giúp bạn căn lề cho các đoạn văn bản trong HTML

Thuộc tính Align giúp bạn căn lề cho các đoạn văn bản trong HTML

Căn lề là một điều mà bạn rất thường hay làm vì thế chúng ta cần biết nhiều cách căn lề khác nhau trong HTML.

Xem thêm bài viết

Định dạng văn bản là một điều bạn sẽ thường làm trong HTML. Đoạn văn rất cần được định dạng để trở nên bắt mắt hơn. Căn lề mang đến cho trang web một dáng ngoài thu hút hơn. HTML cho phép bạn căn lề cho trang web. Các thẻ căn lề trong HTML  đa dạng và giúp bạn căn lề cho văn bản một cách chính xác hơn. Đó là một lợi thế lớn dành cho bạn. Kể từ HTML5 các thẻ căn lề đã bị bỏ đi. Nhưng nếu bạn muốn sử dụng thì bạn vẫn có thể sử dụng.

Dù vậy bạn đã biết có bao nhiêu kiểu căn lề trong HTML chưa? Chắc chắn là bạn vẫn chưa biết nhiều đến những kiểu căn lề khác nhau trong HTML.

Có bao nhiêu kiểu căn lề trong HTML?

Dùng thuộc tính Align trong HTML. Thông thường thuộc tính Align sẽ nằm trong thẻ P, thẻ Span hoặc thẻ Div,…Align giúp ích cho bạn rất nhiều trong quá trình định dạng văn bản.

Cách thứ hai là bạn sử dụng thuộc tính text align hoặc vertical align trong CSS. Mình sẽ hướng dẫn bạn sử dụng hai thuộc tính này. Bây giờ chúng ta sẽ học căn lề bằng thuộc tính Align.

Align giúp bạn căn lề cực nhanh

Hiện tại thuộc tính Align đã bị loại bỏ trong HTML5. Tuy nhiên bạn vẫn cần phải sử dụng những thẻ này để bạn tiến hành định dạng trong HTML. Thuộc tính này là một thuộc tính chung cho nên bạn có thể sử dụng cho toàn bộ những thẻ trong HTML. Thuộc tính Align khá đa dạng và sử dụng dễ dàng hơn. Chứ không phải chỉ có một thẻ Center. Trong Align còn có giá trị căn lề phải, trái và giữa.

Cú pháp thuộc tính Align

<Tên thẻ align= “…”></Tên thẻ>

Trong “…” :

Center : căn lề giữa

Right: căn lề phải

Left : căn lề trái

Justify: căn đều

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        <style>
            body{
                background-color: aqua;
            }
            h1{
                color: crimson;
            }
            .intro {
                background-color:peachpuff;
                
            }
        </style>
        
    </head>
    <body>
        
        
            <h1>Tổng hợp tin tức</h1>
            <p align="right" class="intro">
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, <span>tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm.</span>  <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> 
                    </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>
            <p align="center" class="intro" >
                Càng cận ngày công chiếu, phim điện ảnh lần thứ 21 của loạt anime trinh thám nổi tiếng với tên gọi Detective Conan: Crimson Love Letter (tạm dịch Thám Tử Lừng Danh Conan: Bức thư tình đỏ thắm) lại càng siêng năng tung hoả mù thông tin khiến khán giả đứng ngồi không yên.
                Cụ thể, sau hai trailer đầu tiên tiết lộ chủ đề chính của phim sẽ xoay quanh hai nhân vật Kazuha và Heiji, vừa qua nhà phát hành lại tiếp tục tung ra hai đoạn quảng cáo ngắn để quảng bá phim trên sóng truyền hình Nhật Bản. Điều đáng nói là cách đặt tên hai đoạn phim này lại tiếp tục gợi nên nghi vấn: Liệu có phải Heiji đã thầm thương cô bạn thân của mình từ lâu?
            </p>
         
        
    
    </body>
</html>

Kết quả ví dụ

Bạn đã thấy ở ví dụ đoạn đầu tiên sẽ được căn lề phải và đoạn sau được căn giữa.

Dễ dàng áp dụng để định dạng văn bản tromg HTML. Vậy là bạn đã biết thêm một cách để thực hiện căn lề trong HTML. Quá tuyệt vời. Ở bài viết sau chúng ta sẽ nói về  nhiều chủ đề thú vị hơn nữa. Tạm biệt và hẹn gặp lại các bạn.




Đặt câu hỏi cho bài viết này ?