Vertical-align thuộc tính CSS không hiển thị đúng trên trình duyệt Chrome

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

  1. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    556
    Đã được thích:
    38
    Điểm thành tích:
    28
    Thuộc tính vertical-align: middle; của mình trong thẻ div css class nó hiển thị không đúng trên trình duyệt web chrome, trong khi nó hiển thị hoạt động đúng trên trình duyệt web firefox mới bực chứ.

    Bạn nào biết giúp mình với làm sao cho nó hiển thị đúng trên cả 2 trình duyệt với thuộc tính vertical-align: middle giúp mình với.

    Code css
    HTML:
    .login
{
   width: 100%;
   height: 55px;
}
.login .loginnull {
    vertical-align: middle;
    text-align: center;
}
    Code HTML
    HTML:
    <div class="login">
   <div class="loginnull">
      <a href="#">Login / Register </a>
  </div>
</div>
    Khi chạy trên Firefox thì nó hiển thị đẹp theo ý như code.

    vertical-align-middle-hien-thi-dung-tren-firefox.jpg

    Khi chạy web trên Chrome thì nó lại hiển thị sai, không hiển thị đúng như trên firefox

    vertical-align-middle-hien-thi-sai-tren-chrome.jpg
     
    Cảm ơn đã xem bài:

    Vertical-align thuộc tính CSS không hiển thị đúng trên trình duyệt Chrome

    danh sách diễn đàn rao vặt gov chất lượng

    Lượt xem: 1,717 - Xem Bài Viết Cùng Chủ Đề

    seolagi, 14/11/18
    #1
  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,359
    Đã được thích:
    996
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn phải thêm thuộc tính display đúng cho 2 thẻ thì mới hiển thị đúng bạn nhé. Bạn sửa lại css như sau nhé:
    HTML:
    .login
{
   width: 100%;
   height: 55px;
   display: table;
}
.login .loginnull {
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}
     
    admin, 14/11/18
    #2
    seolagi thích bài này.
  3. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    556
    Đã được thích:
    38
    Điểm thành tích:
    28
    Cảm ơn ad, đúng cái mình cần, mình đã làm được như ad chỉ rùi
     
    seolagi, 14/11/18
    #3


Chủ để tương tự : Vertical-align thuộc
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Các thuộc tính CSS căn bản cần biết 11/1/16
Ngôn ngữ lập trình CSS, HTML, HTML5 B5: Tạo trang đăng ký với các thuộc tính căn bản trong html5 10/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính đường viền bóng mờ trong css html đẹp mặt cho các thẻ <div> <h> 1/10/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính tạo đường viền cong bo tròn cho border css trong html 1/10/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính để các thẻ H1, h2, h3, h4, h5, h6 nằm trên 1 dòng hoặc 1 hàng 22/9/14

Like và Share ủng hộ ITSEOVN