CSS: căn dọc theo văn bản trong mục li, không hoạt động

Tôi sử dụng hình ảnh kiểu danh sách cho các mục li và văn bản một dòng.CSS: căn dọc theo văn bản trong mục li, không hoạt động

enter image description here

Nhưng có vẻ xấu, vì vậy tôi muốn theo chiều dọc align văn bản vào giữa của hình ảnh.

Tôi nên sử dụng căn chỉnh dọc: giữa, phải không? Nhưng nó không hiệu quả với tôi.

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      body { 
       background-color: #464443; 
       color: white; 
      } 
      ul { 
       list-style-image: url('bg.png'); 
      } 

      li { 
       vertical-align: middle; 
      } 

     </style> 
    </head> 

    <body> 
     <ul> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
     </ul> 
    </body> 
</html>

Nguồn

2012-04-09 daisy

Một cách thỏa đáng để làm điều này (IMO) là không sử dụng list-style-image, thay vì sử dụng tài sản nền để thiết lập các "viên đạn" (lưu ý tôi thay hình ảnh giữ chỗ của riêng tôi kể từ khi tôi chỉ cần sao chép/dán từ một fiddle). Đệm của bạn và các kích thước khác sẽ khác nhau tùy thuộc vào kích thước của hình ảnh "dấu đầu dòng".

Đây là fiddle: http://jsfiddle.net/huBpa/1/

body { 
    background-color: #464443; 
    color: white; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat; 
    line-height: 32px; 
    vertical-align: middle; 
    padding-left: 40px; 
}

Nguồn

2012-04-09 04:08:50

đồng ý. 'background' là phương thức chính xác + đáng tin cậy hơn nhiều – benesch

Sẽ không hoạt động nếu văn bản là nhiều dòng. – Muhd

Bạn có thể đúng, Muhd, nhưng chỉ phụ thuộc vào định nghĩa: nó "hoạt động" tốt với nhiều dòng, nhưng viên đạn luôn ở trên cùng. Tuy nhiên, đây là tiêu chuẩn cho các danh sách có dấu đầu dòng. Trừ khi tôi hiểu lầm, trong trường hợp đó nếu bạn làm một cái nĩa của câu đố của tôi để hiển thị vấn đề, tôi muốn được quan tâm để xem nó! –

-1

Add line-height để li. Hãy chắc chắn rằng nó là chiều cao tương tự như hình ảnh

li { 
      vertical-align: middle; 
      line-height: 30px; 
     }

Nguồn

2012-04-09 04:11:13 Ray

Không: http://jsfiddle.net/huBpa/ –

Đây là những gì tôi sẽ sử dụng. Tôi không sử dụng căn chỉnh theo chiều dọc và thay vào đó sử dụng phần đệm để di chuyển văn bản xung quanh thành bất kỳ nơi nào tôi muốn.

ul { 
      list-style: none; 
      margin-left: 0; 
      padding-left: 0; 
    } 

    li { 
      padding: 10px 10px 15px 20px; 
      background-image: url(images/arrow.png); 
      background-repeat: no-repeat; 
      background-position: 0px; 
    }

Nguồn

2012-04-09 04:51:05 tastybento

CSS: căn dọc theo văn bản trong mục li, không hoạt động

Trả lời

Các vấn đề liên quan