如何調整CSS單選按鈕並保留中間的文字

我不確定在此單選按鈕上更改哪個部分以使其更小並保持文本與內部按鈕一致。我所做的更改將文本置於單選按鈕的頂部。你能否建議改變哪些位以保持一切順利？如何調整CSS單選按鈕並保留中間的文字

這是一個很大的單選按鈕

.button { 
 
    background: #cfe7fa; 
 
    background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1)); 
 
    background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    border: 1px solid #6393c1; 
 
    -moz-border-radius: 40px; 
 
    -webkit-border-radius: 40px; 
 
    border-radius: 40px; 
 
    -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font: 15px Arial, Verdana, Geneva, sans-serif; 
 
    line-height: 41px; 
 
    padding-right: 20px; 
 
} 
 
.button:hover .inner { 
 
    opacity: .5; 
 
} 
 
.button input { 
 
    display: none; 
 
} 
 
.button input:checked + .outer .inner { 
 
    opacity: 1; 
 
} 
 
.button .outer { 
 
    background: #2989d8; 
 
    background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354)); 
 
    background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    border: 1px solid black; 
 
    -moz-border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    border-radius: 20px; 
 
    display: block; 
 
    float: left; 
 
    height: 20px; 
 
    margin: 10px; 
 
    width: 20px; 
 
} 
 
.button .inner { 
 
    background: #e4f5fc; 
 
    background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed)); 
 
    background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    -moz-border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    border-radius: 20px; 
 
    display: block; 
 
    height: 14px; 
 
    margin: 3px; 
 
    opacity: 0; 
 
    -moz-transition: opacity .5s; 
 
    -webkit-transition: opacity .5s; 
 
    -o-transition: opacity .5s; 
 
    transition: opacity .5s; 
 
    width: 14px; 
 
}

<div style="text-align: center;"> 
 
    <label class="button"> 
 
    <input type="radio" name="button" /> 
 
    <span class="outer"><span class="inner"></span></span> 
 
    Add Details 
 
    </label> 
 
    <label class="button"> 
 
    <input type="radio" name="button" /> 
 
    <span class="outer"><span class="inner"></span></span> 
 
    Choice 2 
 
    </label> 
 

 
</div>

我試圖改變我的想法，但現在寫的是在按鍵的上方，我想它中心，所以我必須改變錯誤的部分更改後

HTML

.button { 
 
    background: #cfe7fa; 
 
    background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1)); 
 
    background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%); 
 
    border: 1px solid #6393c1; 
 
    -moz-border-radius: 20px; 
 
    -webkit-border-radius: 20px; 
 
    border-radius: 20px; 
 
    -moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5); 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font: 10px Arial, Verdana, Geneva, sans-serif; 
 
    line-height: 3px; 
 
    padding-right: 5px; 
 
} 
 
.button:hover .inner { 
 
    opacity: .5; 
 
} 
 
.button input { 
 
    display: none; 
 
} 
 
.button input:checked + .outer .inner { 
 
    opacity: 1; 
 
} 
 
.button .outer { 
 
    background: #2989d8; 
 
    background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354)); 
 
    background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%); 
 
    border: 1px solid black; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    display: block; 
 
    float: left; 
 
    height: 10px; 
 
    margin: 5px; 
 
    width: 10px; 
 
} 
 
.button .inner { 
 
    background: #e4f5fc; 
 
    background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed)); 
 
    background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    display: block; 
 
    height: 10px; 
 
    margin: .5px; 
 
    opacity: 0; 
 
    -moz-transition: opacity .5s; 
 
    -webkit-transition: opacity .5s; 
 
    -o-transition: opacity .5s; 
 
    transition: opacity .5s; 
 
    width: 10px; 
 
}

<form id="form1" runat="server"> 
 
    <div> 
 
    <br /> 
 
    <br /> 
 
    <div style="text-align: center;"> 
 
     <label class="button"> 
 
     <input type="radio" name="button" /> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     Add Details 
 
     </label> 
 
     <label class="button"> 
 
     <input type="radio" name="button" /> 
 
     <span class="outer"><span class="inner"></span></span> 
 
     Choice 2 
 
     </label> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
    </div> 
 
    <br /> 
 
    </div> 
 
</form>

來源

2015-10-11 Sara

只要改變line-height: 3px;到line-height:22.5px;

又見jsfiddle例子。

來源

2015-10-11 16:08:41

是的，想過一樣的，但後來我在Chrome中檢查...（不完全對齊）...需要更多的調整，可能.... – sinisake

感謝您的快速答案和您的建議。我會改變它:) –

這工作的一種享受，如果我再次調整大小（也許是一個不同的頁面或東西），你是如何工作線高度22.5px的大按鈕的原始大小是41px？ – Sara

如何調整CSS單選按鈕並保留中間的文字

回答

相關問題