Question

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13; 现在文本在单选按钮附近下降，但它希望文本位于中心。

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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

在此，我将整个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

如何增加单选按钮中文本的大小，它应该对齐居中

4 个答案: