Bagaimana untuk memusatkan teks secara menegak di sebelah suis?
P粉354948724
P粉354948724 2023-09-15 11:58:54
0
1
527

Saya mahu membuat teks di tengah kelas "togol-label" secara menegak dengan "suis" tetapi saya gagal Ini kod yang saya gunakan

.toggle-label {
  font-weight: bold;
  font-size: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked+.slider-round {
  background-color: #e53f71;
}

.switch input:focus+.slider-round {
  box-shadow: 0 0 1px #e53f71;
}

.switch input:checked+.slider-round:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
<span class="toggle-label">BGM</span>
<label class="switch" style="margin-right: 20px;">
     <input type="checkbox" id="bgm" checked>
     <span class="slider-round"></span>
</label>
<span class="toggle-label">SFX</span>
     <label class="switch">
     <input type="checkbox" id="sfx" checked>
<span class="slider-round"></span>
</label>

Saya cuba menetapkan padding atas tab togol tetapi ia masih tidak berfungsi Tolong bantu saya memusatkan label togol secara menegak dengan suis

P粉354948724
P粉354948724

membalas semua(1)
P粉489081732

Cuba tambah

Penjajaran menegak: tengah;

ke .togol-label dan .tukar.

Ini sepatutnya membuatkan mereka selesa antara satu sama lain.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan