Thứ Tư, Tháng Hai 12, 2025
spot_img
HomeAlign - Align in CSS

Align – Align in CSS

, , …will not apply.

  • Display elements can be overridden block. block nice inline using the display property. For example: span { display: block;}.
  • Center the image

    To center an image, place margin-left and margin-right to auto and make the image a form element block. block as mentioned in the note above.

    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    }

    For example:





    img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }


    Căn giữa hình ảnh


    Để căn giữa một ảnh, đặt margin-left và margin-right thành auto và làm
    cho hình ảnh trở thành phần tử dạng block như đã nói ở lưu ý phía trên.

    Beautiful Flowers

    Align text horizontally – Use text-align

    In CSS there are properties text-align Allows the content text to be aligned to the left, center or right of the element using the following values:

    • text-align: center – center alignment
    • text-align: left – left alignment
    • text-align: right – align right

    For example:





    .center {
    text-align: center;
    border: 3px solid purple;
    }

    .left {
    text-align: left;
    border: 3px solid purple;
    }
    .right {
    text-align: right;
    border: 3px solid purple;

    Căn giữa


    Website Quản trị mạng


    Căn trái


    Website Quản trị mạng


    Căn phải


    Website Quản trị mạng


    Note: Attributes text-align also only applies to elements block. block because inline occupies only enough width for its content.

    Learn more about text formatting in CSS here

    Align left/right – Use position

    Another method to align elements is to use position: absolute.

    .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid purple;
    padding: 10px;
    }

    For example:





    .right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid purple;
    padding: 10px;
    }


    Căn phải sử dụng position


    Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
    để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
    điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...


    Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
    trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
    hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài
    trực tiếp trên Quantrimang.com.


    Align left/right – Use float

    float property also used for element alignment.

    .right {
    float: right;
    width: 300px;
    border: 3px solid purple;
    padding: 10px;
    }

    For example:





    .right {
    float: right;
    width: 300px;
    border: 3px solid purple;
    padding: 10px;
    }


    Căn phải sử dụng float


    Quantrimang.com là mạng xã hội về khoa học công nghệ, mở rộng nội dung
    để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như
    điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính...


    Bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết,
    trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
    hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài
    trực tiếp trên Quantrimang.com.


    Attention: If an element is being floated higher than the parent element, it will cause content to overflow. To fix it, we use clearfix overflow: auto:

    .clearfix {
    overflow: auto;
    }

    Use Clearfix





    div {
    border: 3px solid #4CAF50;
    padding: 5px;
    }

    .img1 {
    float: right;
    }

    .clearfix {
    overflow: auto;
    }

    .img2 {
    float: right;
    }


    /* Viết bởi Quantrimang.com */

    Trong ví dụ này, hình ảnh đang được float vào cao hơn thành phần chứa nó,
    do đó bị tràn ra bên ngoài:


    Grape
    Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
    Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
    đỏ-tía hay trắng.

    Sử dụng class clearfix với giá trị overflow: auto để
    khắc phục:


    Grapes
    Nho là một loại quả mọng lấy từ các loài cây thân leo thuộc chi Nho (Vitis).
    Quả nho mọc thành chùm từ 6 đến 300 quả, chúng có màu đen, lam, vàng, lục,
    đỏ-tía hay trắng.

    Center vertically – Use padding

    There are many ways to center an element vertically in CSS. The simplest solution is to use padding.

    .center {
    padding: 70px 0;
    border: 3px solid green;

    For example:





    .center {
    padding: 70px 0;
    border: 3px solid purple;
    }


    /* Viết bởi Quantrimang.com */

    Căn giữa theo chiều dọc - Sử dụng padding


    Ví dụ này, chúng tôi sử dụng thuộc tính padding để căn giữa phần tử div
    theo chiều dọc:


    Website Quản trị mạng


    To center both horizontally and vertically, use padding with attributes text-align: center.

    .center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
    }

    Center vertically – Use line-height

    You also have another way to vertically center it by using properties line-height with the same value as the attribute height.

    .center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
    }

    /* Nếu văn bản có nhiều dòng, thêm vào như sau: */
    .center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
    }

    For example:





    .center {
    line-height: 80px;
    height: 80px;
    border: 3px solid purple;
    text-align: center;
    }

    /* Nếu văn bản có nhiều dòng, thêm vào như sau: */
    /* Viết bởi Quantrimang.com */
    .center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
    }


    Căn giữa theo chiều dọc - Sử dụng line-height


    Ví dụ này, chúng tôi sử dụng thuộc tính line-height có giá trị bằng
    thuộc tính height để căn giữa phần tử div theo chiều dọc:


    Website Quản trị mạng


    Center vertically – Use position and transform

    If not used padding and line-height As above, you can use the third way position and transform:

    .center { 
    height: 200px;
    position: relative;
    border: 3px solid purple;
    }

    .center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    For example:





    /* Viết bởi Quantrimang.com */
    .center {
    height: 80px;
    position: relative;
    border: 3px solid purple;
    }

    .center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }


    Căn giữa theo chiều dọc - Sử dụng position và transform


    Ví dụ này, chúng tôi sử dụng thuộc tính position và transform để căn
    giữa phần tử div theo chiều dọc:


    Website Quản trị mạng


    Lưu ý: Thuộc tính transform không được hỗ trợ trong IE8 và các phiên bản
    trước đó.

    Note: Attributes transform Not supported in IE8 and earlier versions.

    Pseudo-elements on grid

    Similar to the Flexbox alternative, you can use a 3-row grid with pseudo-elements:

    .container{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    }
    .container::before,
    .container::after{
    content:"";
    }

    Align vertically up 50%: top:50%, translateY(-50%)

    This is one of the first CSS alignment tricks and is still popular today. It is still popular with many programmers. By relying on absolute positioning, the inner component is 50% above the parent component. You can then change this number up to 50% of its height.

    .container{
      position: relative;
    }
    .element{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    This is a pretty solid approach, with the only drawback being that using compilers can interfere with transformations, for example when applying transitions or using animations.

    Center the table

    Another simple and popular method of using Align in CSS is to center the table using vertical-align. For example:

    .container{
      display: table;
      height: 100%;
    }
    .element{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    This works even if the two elements have an unknown height. Of course, the main limitation here is that you may have some difficulty aligning the background.

    Order clear reticles

    The CSS grid style allows items to be explicitly placed on a specific row, so the same grid declaration as above and the item placed on the second row will suffice:

    .container{
      display:grid;
      grid-template-columns:1fr;
      grid-template-rows: repeat(3, 1fr);
    }
    .element{
      grid-row: 2 / span 1; /* or grid-row: 2/3 */
    }

    You can apply this CSS alignment in IE 10. In fact, it is one of the first and most powerful browsers to support CSS grid. It has a completely different syntax but you can make it work.

    .container{
      display: -ms-grid;
      -ms-grid-rows: (1fr)[3];
      -ms-grid-columns: 1fr;
    }
    .element{
      -ms-grid-column: 1;
      -ms-grid-row: 2;
    }

    Several implementations are possible in the future

    According to the CSS Box Alignment Module Level 3 description, align-content will work on container block and multicol axis blocks. Therefore, you can center the contents of these containers just like you did in flex or grid containers.

    As you can see, CSS provides many ways to align content when you program the web. Knowing them, the web development process will become easier.

    Previous lesson: Display (inline-block) property in CSS

    Next lesson: Combinator in CSS

    RELATED ARTICLES

    LEAVE A REPLY

    Please enter your comment!
    Please enter your name here

    - Advertisment -
    Google search engine

    Most Popular

    Recent Comments