यह वही है मेरे वर्तमान कोड लग रहा है जैसे:पाठ स्थिति
HTML:
<a class="button" href="#">Read More</a>
सीएसएस:
.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%;
}
परिणाम:
+०१२३५१६४१०
सबसे पहले, स्तंभ कि यह सब में लपेटा जाता है एक margin-bottom: 14px है। यह कॉलम से दूरी और उसके नीचे की दो क्षैतिज रेखाएं बनाता है। ऐसा इसलिए है यदि उपयोगकर्ता बटन को सभी एक साथ ले जाना चाहता था, कॉलम के अंदर का पाठ अभी भी नीचे दी गई दो पंक्तियों से 14 पीएक्स शर्मीला मिलेगा।
आप देख सकते हैं .button के लिए पाठ सीएसएस padding संपत्ति और text-align: center का उपयोग करके बीच में गठबंधन है। बटन पर margin-top: 14px है जो बटन के नीचे समान स्थान देता है।
हालांकि, मुझे जो मिल रहा है वह यह है कि बटन के अंदर पाठ के लिए padding तत्व का उपयोग करके, यह इसके चारों ओर की दूरी को प्रभावित करता है (इस मामले में, बटन के नीचे की जगह जो 14px है, अब बड़ा है यह क्या होना चाहिए)।
प्रश्न:
वहाँ एक रास्ता खड़ी .button भीतर पाठ गद्दी संपत्ति का उपयोग किए बिना बदले बिना कोई सफलता के लिए ऊर्ध्वाधर- align, स्थिति, नाव और कुछ अन्य लोगों लेकिन संरेखित करने के लिए के रूप में मैं कोशिश की है है बॉक्स के ऊपर या नीचे की जगह ... इस बारे में जाने का सबसे अच्छा तरीका क्या है और यदि संभव हो, तो इसके बजाय छवि का उपयोग करने का एक वैकल्पिक तरीका क्या है?
किसी भी मदद की सराहना की जाएगी। http://jsfiddle.net/9xpfY/
मुझसे शादी करें @ मैजिक डेव – user1752759
हाहा, कोई चिंता नहीं; जो कुछ भी आप काम कर रहे हैं उसके साथ अच्छा लगाओ। –