Tiêu đề vị trí bên trong <a> yếu tố

Question

Đây là những gì mã hiện tại của tôi trông giống như:

HTML:

<a class="button" href="#">Read More</a> 

CSS:

.button { 
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%; 
font: 12px Helvetica, Arial, sans-serif; 
color: #FFF; 
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); 
text-transform: uppercase; 
text-align: center; 
text-decoration: none; 

cursor: pointer; 
border: none; 

min-width: 87px; 
min-height: 29px; 

float: right; 
margin-top: 14px; 

padding-top: 4.25px; 

transition: all 0.5s ease 0s; 
-webkit-transition: all 0.5s ease 0s; 
-moz-transition: all 0.5s ease 0s; 
-o-transition: all 0.5s ease 0s; 
} 

.button:hover { 
background: url('../images/btn_over.jpg') repeat scroll 0% 0%; 
} 

quả:

---

Thứ nhất, cột rằng đây là tất cả được bọc trong có một margin-bottom: 14px. Điều này tạo ra khoảng cách từ cột và hai đường ngang bên dưới nó. Điều này là như vậy nếu người dùng muốn lấy nút ra tất cả cùng nhau, các văn bản bên trong cột vẫn sẽ đáp ứng 14px nhút nhát từ hai dòng dưới đây.

Như bạn có thể thấy văn bản cho số .button được căn chỉnh ở giữa bằng cách sử dụng thuộc tính css padding và text-align: center. Có một margin-top: 14px trên nút cung cấp cùng khoảng cách trên nút như dưới nó.

Tuy nhiên, điều tôi thấy là bằng cách sử dụng phần tử padding cho văn bản bên trong nút, nó ảnh hưởng đến khoảng cách xung quanh nó (trong trường hợp này, khoảng trống dưới nút có nghĩa là 14px) so với những gì nó nên được).

Câu hỏi:

Có cách nào để theo chiều dọc align text trong .button mà không sử dụng bất động sản đệm như tôi đã cố gắng vertical-align, vị trí, phao và một vài người khác nhưng không thành công mà không thay đổi không gian phía trên hoặc bên dưới hộp ... cách tốt nhất để đi về điều này và nếu có thể, một cách khác để chỉ sử dụng hình ảnh thay thế là gì?

Mọi trợ giúp sẽ được đánh giá cao. http://jsfiddle.net/9xpfY/

Answer 1

Có hai cách bạn có thể làm điều này, tuy nhiên không có javascript cả những phương pháp này đòi hỏi chiều cao tuyệt đối mặc dù tùy chọn thứ hai làm việc liên quan đến các padding bạn đã đặt.

---

• Đầu tiên, một sự lựa chọn rõ ràng là việc sử dụng chiều cao dòng.

  Điều này hoạt động bằng cách đặt chiều cao của dòng văn bản thành giá trị và bởi vì văn bản đã được căn chỉnh theo chiều dọc theo chiều thẳng đứng ở giữa chiều cao dòng bạn nhận được hiệu ứng bạn đang tìm kiếm.

  thêm dòng line-height : 27px; vào .button { sẽ cho bạn kết quả mong muốn.

  jsfiddle

---

• Cách thứ hai là để bọc các văn bản bên trong các phần tử trong một thẻ div và thiết lập bottom tài sản để bottom: -6.75px;

  yếu tố nút của bạn sẽ trông như thế này

  <a class="button" href="#"><span id="buttontext">Read More</span></a>

  và bạn sẽ thêm dòng này vào css của bạn:

  #buttontext {position: relative; bottom: -6.75px;}

  jsfiddle

THAM KHẢO

• line-height

  việc

• bottom

Answer 2

Bạn muốn sử dụng kiểu "chiều cao dòng" để chỉ định chiều cao dòng của văn bản bên trong. Hãy nhớ điều này cũng có thể thay đổi chiều cao của phần tử trong một số trường hợp (ví dụ: khi chiều cao dòng lớn hơn chiều cao của phần tử). Thấy điều này: http://jsfiddle.net/VvnhJ/

Answer 3

Set line-height với giá trị tương tự như của nút height

Answer 4

Tôi nghĩ rằng có một điều bạn có thể làm là sử dụng thuộc tính line-height. Hãy thử điều này:

.button{ 
    line-height : 27px; 
}