如何调整CSS单选按钮的大小并将文本保留在中间

Question

我不确定要在此单选按钮上更改哪个部分以使其变小并使文本与内部按钮保持一致。我所做的更改将文本放在单选按钮的顶部。你能告诉你需要改变哪些位来保持一致。

这是一个很大的单选按钮

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

Answer 1

只需将x[,2][1:500] [1] 409341 409341 409341 409341 409341 409341 409341 411486 422035 422035 422035 [12] 422035 431658 431658 432432 432432 432432 434705 435179 443590 443590 443590 [23] 443590 443590 443590 452983 454948 454948 454948 454948 454948 457306 457306 [34] 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 [45] 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 [56] 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 458307 [67] 458307 458307 458307 458307 458307 458307 458307 458307 458873 458873 462334 [78] 462336 462336 462984 462984 462984 462984 462984 462984 462984 462984 464779 [89] 464779 464953 465905 465905 465905 465905 465905 465905 465905 465905 465905 [100] 465905 465905 465905 465905 465905 465905 465905 465905 465905 465905 465905 [111] 468325 468325 468325 469363 469539 469539 469585 471389 471389 471389 472006 [122] 472006 472431 472431 472431 472431 472431 472431 472431 472431 472431 472431 [133] 472431 472431 472431 472497 472497 472803 472803 473504 473504 473623 473623 [144] 473623 473623 473623 473623 473623 473623 473623 473623 477620 477620 477620 [155] 477620 477620 477620 477620 477620 477620 477620 477620 477620 477620 477620 [166] 479705 480350 482535 482535 482535 482535 482535 482535 482535 482535 482535 [177] 482535 482535 482535 482535 482535 482535 482535 482535 482535 482535 482535 [188] 482535 484568 484568 484568 484568 484568 488477 530816 530816 530816 530816 [199] 530816 530816 531817 531817 531817 531817 531817 531817 531817 531817 531817 [210] 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 [221] 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 [232] 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 531817 [243] 531817 531817 531817 531817 531817 532355 532355 535845 535846 535856 537961 [254] 537961 537961 537961 537961 537961 537961 537961 537961 538907 540396 540396 [265] 540396 540396 540396 541233 541233 541233 541233 541233 541233 541233 541233 [276] 541233 541233 541233 541233 541233 541233 541233 541233 541233 541233 541233 [287] 541233 541233 541233 541233 541233 541233 541233 541233 541233 541233 541233 [298] 541233 541233 541233 541233 541233 541233 541253 541253 541253 541253 541605 [309] 541605 541605 541605 541605 541605 541605 541605 541605 541605 541605 541605 [320] 541605 541745 541745 541745 541745 541745 541745 541745 541745 541745 542430 [331] 542430 542430 542430 542430 542430 542430 542549 542549 542549 542549 542549 [342] 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 [353] 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 [364] 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 [375] 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 542549 [386] 542549 542549 543678 543678 543678 543678 543846 543846 549949 549949 549949 [397] 549949 549949 549949 549949 549949 549949 551494 551494 552870 552870 552870 [408] 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 [419] 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 [430] 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 [441] 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 [452] 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 552870 [463] 552870 552870 552870 555274 555274 555274 555274 555274 555274 555274 555274 [474] 555274 555274 555274 555274 555274 555274 555274 555274 555274 563748 576624 [485] 576624 576624 576624 576624 576624 576624 576624 576624 576624 576624 576624 [496] 576624 576624 576624 590125 590125 更改为line-height: 3px;

即可

另见jsfiddle示例。