Cách căn chỉnh văn bản trung tâm trong các nút tùy chỉnh?

Tôi có html nàyCách căn chỉnh văn bản trung tâm trong các nút tùy chỉnh?

<head> 
<title>HTML5 App</title> 

<link rel="stylesheet" type="text/css" href="css/custom.css"> 
<link rel="stylesheet" type="text/css" href="css/buttons.css"> 

</head> 

<body> 
<!--Estructura --> 


<div id="botones"> 
    <button class="btn" data-am-type="button">Soy un &lt;button&gt;</button> 
    <a class="btn" data-am-type="button">Soy un &lt;a&gt;</a> 
    <div class="btn" data-am-type="button">Soy un &lt;div&gt;</div> 
    <input class="btn" type="button" value="Soy un <input>"> 
</div> 

</body>

Trong < nút> và < input>, văn bản là trung tâm class của nút nhưng trong < a> và < div>, văn bản được hiển thị trên cùng của nút. Tôi nghĩ rằng nút <> và đầu vào <> kế thừa một số thuộc tính và do đó chúng căn chỉnh văn bản ở giữa nút.

Tôi thấy điều này

và tôi muốn rằng tất cả các nút sắp xếp văn bản ở giữa.

Lớp "btn" là thế này

.btn{ 
display: inline-block; 
padding: 4px 12px; /* Padding por defecto */ 
font-size: 16px; /* Tamaño fuente por defecto */ 
line-height: 20px; /* Tamaño de linea */ 
text-align: center; 
vertical-align: middle; 

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 

cursor: pointer; 
height: 80px; 
background-color: #f5f5f5; /* por si no se ve el gradiente, aunque si lo pruebo en Chrome nunca deberia verse este color*/ 
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); 

border: 1px solid #cccccc; 
-webkit-border-radius: 4px; 
}

Bất kỳ ý tưởng?

Nguồn

2013-05-21 Bae

Bản sao có thể có của [Căn dọc của văn bản nút] (http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) – Pensierinmusica

Để theo chiều dọc trung tâm nội dung của những yếu tố này, bạn chỉ cần thiết lập các line-height văn bản của phần tử tương đương với height của nguyên tố này, và thiết lập box-sizing-border-box (theo thứ tự mà các height của tất cả các yếu tố đều giống nhau:

.btn { 
    /* other, unchanged, CSS */ 
    line-height: 80px; /* <- changed this */ 
    box-sizing: border-box; /* <- added this */ 
}

JS Fiddle demo.

Rõ ràng điều này không gây ra vấn đề này, các văn bản nên quấn vào một dòng thứ hai.

Nguồn

2013-05-21 10:21:48

-1

Thêm display:table-cell; cho lớp .btn.

như

.btn{display:table-cell;}

này sẽ tạo ra sự liên kết dọc cho Div cũng như a yếu tố có .btn lớp. Hy vọng điều này sẽ hữu ích.

Nguồn

2013-05-21 10:24:07 Nitesh

điểm: không được hỗ trợ trong IE7 hoặc thấp hơn – Chalist

IE7 trở xuống? Nút thẻ chính nó không được hỗ trợ cho IE7 hoặc thấp hơn. Có lẽ bạn quên đề cập đến điều đó. Đúng? - @chalist – Nitesh

Bạn cũng bỏ qua một điểm quan trọng của đoạn mã. tức là thẻ tiêu đề. Nó đã đề cập đến HTML5 App. HTML5. Bạn có thể viết thư cho người dùng đã hỏi điều này và nói rằng nó "không được hỗ trợ trong IE7 hoặc thấp hơn". Đúng? - @chalist – Nitesh

Hãy loại bỏ các padding:4px 12px; từ lớp btn và thiết lập line-height: theo yêu cầu của bạn thì văn bản nên đến ở trung tâm của hộp.

Nguồn

2013-05-21 10:31:00

-1

Remove này: height: 80px;

đệm của bạn: padding: 4px 12px;

Sau khi bạn loại bỏ các chiều cao đệm phải ~ padding: 30px 12px;

Bạn phải thiết lập mức phạt đệm (dựa trên chiều cao văn bản của bạn).

Nguồn

2013-05-21 10:31:30 Ifch0o1

Tôi nghĩ rằng tạo chiều cao bằng cách đặt đệm cho phần tử a.

Nguồn

2013-05-21 10:32:30 Chalist

border: none; 
outline: 0; 
cursor: pointer; 
text-decoration: none; 
overflow: visible; 
background: none; 
padding:0 16px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
color: #222

Hy vọng điều này là hữu ích

Nguồn

2013-05-21 10:49:48

-3

vertical-align:center;

sử dụng đó và nó sẽ làm việc

Nguồn

2013-10-11 08:20:43

nó phải được, chỉ đơn giản là: line-height: 0.25em;

Nguồn

2016-04-12 13:24:24 mrcat

Cách căn chỉnh văn bản trung tâm trong các nút tùy chỉnh?

Trả lời

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