suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie zentriere ich Text vertikal neben einem Schalter?

Ich möchte mit „switch“ einen Text in der Mitte der Klasse „toggle-label“ vertikal erstellen, aber es ist mir nicht gelungen Dies ist der Code, den ich verwende

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

Ich habe versucht, die obere Polsterung der Umschaltfläche einzustellen, aber es funktioniert immer noch nicht Bitte helfen Sie mir, das Umschaltetikett vertikal mit dem Schalter auszurichten

P粉354948724P粉354948724465 Tage vor560

Antworte allen(1)Ich werde antworten

  • P粉489081732

    P粉4890817322023-09-16 00:05:29

    尝试添加

    垂直对齐:中间;

    .toggle-label.switch

    这应该会让他们彼此相处融洽。

    Antwort
    0
  • StornierenAntwort