Canh giữa thẻ div, img, text trong CSS mã HTML như thế nào

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 29/7/18.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Mình muốn canh giữa dữ liệu như câu hỏi: Canh giữa thẻ div, img, text trong CSS mã HTML như thế nào?
    Nghĩa là mình có 2 cái thẻ div lồng nhau như code dưới.
    • Mình muốn thẻ div có class="div3" nằm ở giữa cái div có class="div2" thì làm như thế nào.
    • Nghĩa là class="div3" canh giữa class="div2" và class="div1"
    Mã:
    <div class="div1">
       <div class="div2"></div>
       <div class="div3"></div>
    </div>
    
    Demo giống tấm hình dưới đó, cảm ơn mọi người nhiều

    canh-giua-trong-css.jpg
     
    Cảm ơn đã xem bài:

    Canh giữa thẻ div, img, text trong CSS mã HTML như thế nào

    Chỉnh sửa cuối: 29/7/18
  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đây nhé, thử code css như dưới xem thử.
    HTML:
    .div1 {
        height: 200px;
        width:100%;
        position: relative;
    }
    .div2 {
        height: 200px;
        width:100%;
    }
    .div3 {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    Ngoài ra bạn có thể tham khảo 100% toàn bộ code css canh giữa trong html nằm ở link sau: https://www.w3schools.com/css/css_align.asp
     
    seolagi thích bài này.
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, code css rất tốt.
    Mã:
    .div1 {
        height: 200px;
        width:100%;
        position: relative;
    }
    .div3 {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    • CODE TỐT, Thanks
     
  4. vjetdung96
    Tham gia ngày:
    22/1/18
    Bài viết:
    126
    Đã được thích:
    5
    Điểm thành tích:
    18
    Giới tính:
    Nam
    lúc trước học giờ đi làm seo quên hết mấy cái này :D
     
  5. maytinhvinh
    Tham gia ngày:
    8/11/17
    Bài viết:
    87
    Đã được thích:
    0
    Điểm thành tích:
    16
    Giới tính:
    Nam
    nhiều lúc mấy cái này lại k nhớ :D
     
  6. dinhhuy
    Tham gia ngày:
    13/3/18
    Bài viết:
    10
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Cảm ơn bạn đã chia sẻ cách chèn thẻ img rất hiệu quả
     


Chủ để tương tự : Canh giữa
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Canh giữa Center tag ul li list với width chiều rộng của thẻ div trên web 4/7/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính canh dọc trong css, canh dọc cho chữ và hình ảnh trong css 11/9/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Căn text ở giữa botton và top trong html css 27/8/13