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

    Moderator

     Thành viên BQT

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

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

    seolagi, 14/11/18
    #1
  3. 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,379
    Đã được thích:
    1,057
    Đ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.
  4. seolagi

    seolagi

    Moderator

     Thành viên BQT

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


Like và Share ủng hộ ITSEOVN