कस्टम बटन में केंद्र टेक्स्ट कैसे संरेखित करें?

मैं इस एचटीएमएलकस्टम बटन में केंद्र टेक्स्ट कैसे संरेखित करें?

<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>

< बटन> और < इनपुट> है, पाठ बटन के मध्य में संरेखित करें है, लेकिन < एक> और < div> में, पाठ बटन के शीर्ष दिखाया गया है। मुझे लगता है कि < बटन> और < इनपुट> कुछ संपत्ति का उत्तराधिकारी है और इसलिए वे बटन के बीच में टेक्स्ट संरेखित करते हैं।

मैं इस

देख सकते हैं और मुझे लगता है कि सभी बटन बीच में पाठ संरेखित करना चाहते हैं।

वर्ग "btn" इस

.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; 
}

किसी भी विचार है?

स्रोत

2013-05-21 Bae

[बटन के टेक्स्ट लंबवत संरेखण] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) – Pensierinmusica

खड़ी-केंद्र के लिए इन तत्वों में से पाठ, बस तत्व के height के बराबर तत्व के पाठ की line-height निर्धारित करते हैं, और border-box (करने के लिए box-sizing सेट क्रम में है कि सभी तत्वों के height ही कर रहे हैं:

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

JS Fiddle demo।

जाहिर है इस समस्याओं का कारण है, पाठ एक दूसरी पंक्ति को रैप करना चाहिए।

स्रोत

2013-05-21 10:21:48

-1

.btn कक्षा के लिए display:table-cell; जोड़ें।

.btn{display:table-cell;}

की तरह इस Div के लिए लंबवत संरेखण के साथ-साथ a वर्ग .btn होने तत्वों का निर्माण करेगा। उम्मीद है कि यह मदद करता है।

स्रोत

2013-05-21 10:24:07 Nitesh

बिंदु: आईई 7 या कम – Chalist

आईई 7 या उससे कम में समर्थित नहीं है? टैग बटन स्वयं आईई 7 या उससे कम के लिए समर्थित नहीं है। शायद आप इसका जिक्र करना भूल गए हैं। सही? - @chalist – Nitesh

आपने स्निपेट के एक महत्वपूर्ण बिंदु को भी नजरअंदाज कर दिया। यानी शीर्षक टैग। इसने एचटीएमएल 5 ऐप का उल्लेख किया है। एचटीएमएल 5। आप उस उपयोगकर्ता को लिख सकते हैं जिसने यह पूछा है और कहता है कि यह "आईई 7 या उससे कम में समर्थित नहीं है"। सही? - @chalist – Nitesh

कृपया padding:4px 12px; btn वर्ग से हटा दिया और line-height: आपकी आवश्यकता तो पाठ बॉक्स के केंद्र में आना चाहिए अनुसार निर्धारित किया है।

स्रोत

2013-05-21 10:31:00

-1

निकालें इस: height: 80px;

आपका गद्दी: padding: 4px 12px;

आप निकालने के बाद ऊंचाई गद्दी होना चाहिए ~ padding: 30px 12px;

आप गद्दी ठीक (अपने पाठ ऊंचाई के आधार पर) सेट करना होगा।

स्रोत

2013-05-21 10:31:30 Ifch0o1

मुझे लगता है कि a तत्व के लिए पैडिंग सेटिंग के साथ ऊंचाई बनाएं।

स्रोत

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

आशा यह सहायक है

स्रोत

2013-05-21 10:49:48

-3

vertical-align:center;

उपयोग कि और यह काम करेंगे

स्रोत

2013-10-11 08:20:43

यह होना चाहिए, बस: line-height: 0.25em;

स्रोत

2016-04-12 13:24:24 mrcat

कस्टम बटन में केंद्र टेक्स्ट कैसे संरेखित करें?

उत्तर

संबंधित मुद्दे