如何增加文本的大小，單選按鈕，並應當對準中心

Question

.big{ width: 2.5em; height: 1.5em; }

<p> 
 
<input type="radio" name="r1" value="a" checked="checked" class="big" /> 
 
<span>Closed</span> 
 
<input type="radio" name="r1" value="b" class="big" /> 
 
<span>Pending</span> 
 
</p>

現在文本灌進附近的單選按鈕，但它想要的文字應該是在該中心。

Answer 1

檢查這個CSS

.big{ width: 2.5em; 
     display: inline-block; 
     vertical-align: top; 
    } 
.align{height: 1.5em;} 
.text-big{ font-size:1.2em} 
.span{ 
    display: inline-block; 
    vertical-align: top; 
    margin-right: 3%; 
} 

https://jsfiddle.net/tkp2007p/1/

Answer 2

您可以使用vertical align這一點。

.big{ width: 2.5em; height: 1.5em; } 
 
p span, 
 
p .big{vertical-align: middle}

<p> 
 
<input type="radio" name="r1" value="a" checked="checked" class="big" /> 
 
<span>Closed</span> 
 
<input type="radio" name="r1" value="b" class="big" /> 
 
<span>Pending</span> 
 
</p>

Answer 3

.align{line-height: 1.5em;} 
 
    .big{ width: 2.5em; } 
 
    .text-big{ font-size:1.2em}

<p> 
 
    <span class="align"> 
 

 
     <input type="radio" name="r1" value="a" checked="checked" class="big" /> 
 
     <span class="text-big">Closed</span> 
 

 
     <input type="radio" name="r1" value="b" class="big" /> 
 
     <span class="text-big">Pending</span> 
 

 
    </span> 
 
    </p>

在這裏，我包裹在一個橫跨整個radio及其text帶班align
並補充line-height那個類。

Answer 4

試試這個

<p> 
<input type="radio" name="r1" value="a" checked="checked" class="big" /> 
<span>Closed</span> 
<input type="radio" name="r1" value="b" class="big" /> 
<span>Pending</span> 
</p> 

CSS：

.big{ width: 2.5em; height: 1.5em; } 

.big+span{ 
    font-size:15px; 
} 

.big ,.big+span{ 
    vertical-align:middle; 
} 

https://jsfiddle.net

更新根據您的要求：

<p> 
<input type="radio" name="r1" value="a" checked="checked" class="big" id="r1" /> 
<label for="r1">Closed</label> 
<input type="radio" name="r1" value="b" class="big" id="r2"/> 
<label for="r2">Pending</label> 
</p> 

個CSS：

/* COMMON RADIO STYLES */ 

input[type=radio]{ 
    /* hide original inputs */ 
    visibility: hidden; 
    position: absolute; 
} 
input[type=radio] + label{ 
    cursor:pointer; 
} 
input[type=radio] + label:before{ 
    height:16px; 
    margin-right: 4px; 
    content: " "; 
    display:inline-block; 
    vertical-align: baseline; 
    transition: 0.3s; 
    border:1px solid #ccc; 
    border-radius:10px; 
    box-shadow: inset 0 -3px 6px #e4e4e4; 
    transition: 0.3s; 
} 

/* CUSTOM RADIO STYLES */ 

input[type=radio] + label:before{ 
    border-radius:50%; 
    width:16px; 
} 

/* CHECKED */ 
input[type=radio]:checked + label:before{ 
    box-shadow: inset 0 -1px 3px #e4e4e4, inset 0 0 1px #222, inset 0 0 0 3px yellow; 
background:#000; 
    } 

輸出：

https://jsfiddle.net