Chuyển đến nội dung chính

Canh giữa nội dung thẻ div bất kỳ

Trước đây, để canh giữa 1 khối theo chiều ngang hoặc dọc, phải dùng rất nhiều thủ thuật. Nhưng từ khi css3 ra đời, đã bổ sung thuộc tính display:box, khiến việc canh giữa dễ dàng hơn.
Điều kiện đầu tiên bắt buộc là bạn phải xác rộng chiều rộng và chiều cao của box cần canh giữa. Nếu bạn không xác định, việc hiển thị sẽ bị sai lệch tùy theo cách hiển thị của trình duyệt (như Firefox, Chrome).

Khi không xác định chiều rộng:
Hiển thị trên Google Chrome

Hiển thị trên Firefox

Hiển thị dòng chữ Hello World ở giữa thẻ div:

        <style type="text/css">
            .centerBox
            {        
                /* Firefox */
                display:-moz-box;
                -moz-box-orient:vertical;
                -moz-box-pack:center;
                -moz-box-align:center;

                /* Safari and Chrome */
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-box-pack:center;
                -webkit-box-align:center;

                /* W3C */
                display:box;
                box-orient:vertical;
                box-pack:center;
                box-align:center;
            }
        </style>
        <div style="margin: 5px; width: 250px; border: solid 1px; height: 100px;">
            <div class="centerBox" style="height: 100px;">Hello World</div>
        </div>        
        <div style="margin: 5px; width: 250px; border: solid 1px; height: 100px;">
            <div class="centerBox" style="height: 100px; width: 250px;">Hello World</div>
        </div>

Giải thích:

Thuộc tính box-align: Sắp xếp nội dung phần tử theo hướng vuông góc với hướng bố trí của nó.
Hướng bố trí phụ thuộc vào định hướng của phần tử (box-orient): ngang hoặc dọc. (vertical or horizontal)
box-align: start|end|center|baseline|stretch; 
Thuộc tính box-pack: căn lề thẻ div dựa theo giá trị box-orient (theo chiều ngang hay chiều dọc)
box-align: start|end|center|baseline|stretch

Bạn có thể xem ví dụ đầy đủ ở: http://jsfiddle.net/anbinhtrong/7zGQN/

Nhận xét

Bài đăng phổ biến từ blog này

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh. Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Tổng hợp một số kiến thức lập trình về Amibroker

Giới thiệu về Amibroker Amibroker theo developer Tomasz Janeczko được xây dựng dựa trên ngôn ngữ C. Vì vậy bộ code Amibroker Formula Language sử dụng có syntax khá tương đồng với C, ví dụ như câu lệnh #include để import hay cách gói các object, hàm trong các block {} và kết thúc câu lệnh bằng dấu “;”. AFL trong Amibroker là ngôn ngữ xử lý mảng (an array processing language). Nó hoạt động dựa trên các mảng (các dòng/vector) số liệu, khá giống với cách hoạt động của spreadsheet trên excel.