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

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    497
    Đã được thích:
    29
    Điểm thành tích:
    28
    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

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 29/7/18
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,237
    Đã được thích:
    936
    Đ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

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    497
    Đã được thích:
    29
    Điểm thành tích:
    28
    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

    vjetdung96

    Vip Member

    Tham gia ngày:
    22/1/18
    Bài viết:
    151
    Đã được thích:
    7
    Đ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

    maytinhvinh

    Vip Member

    Tham gia ngày:
    8/11/17
    Bài viết:
    115
    Đã đượ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

    dinhhuy Thành Viên Mới

    Tham gia ngày:
    13/3/18
    Bài viết:
    18
    Đã đượ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 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

Like và Share ủng hộ ITSEOVN