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,044
    Đã được thích:
    81
    Đ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
    seolagi, 29/7/18
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,992
    Đã được thích:
    1,215
    Đ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
     
    admin, 29/7/18
    #2
    seolagi thích bài này.
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,044
    Đã được thích:
    81
    Đ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
     
    seolagi, 29/7/18
    #3
  5. 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
     
    vjetdung96, 29/7/18
    #4
  6. 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
     
    maytinhvinh, 30/7/18
    #5
  7. 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ả
     
    dinhhuy, 30/7/18
    #6


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