Perfekte Lösung zur vertikalen Zentrierung von Formelementen

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
<title>Perfekte vertikale Zentrierung von Formularelementen</title>
<style type="text/css">
*{Auffüllung:0; Rand:0;}
body{font:14px/1.231 Tahoma, Geneva, sans-serif; background-color:#D1D5E7;}
label{cursor:pointer; vertical-align:middle;}
Eingabe {vertikale Ausrichtung: Mitte; Rand: 5px;}
.warp{ Rand:100px 350px;}
Spanne {vertikale Ausrichtung: Mitte; Textdekoration: Unterstreichung;}
img{ vertikale Ausrichtung: Mitte; Rahmen: 1px durchgehend #CCF;_Rand unten: 1px;}
p{Schriftgröße:14px;}
h2{Schriftgröße:16px;}
</Stil>
</Kopf>
<Text>
<div Klasse="Warp">
<h2>Optionsfelder und Kontrollkästchen sind sehr klein und nicht leicht anzuklicken, was bei vielen Benutzern Verwirrung stiftet und zu einer schlechten Benutzererfahrung führt</h2>
<p>Bitte sehen Sie sich die perfekte Lösung für [Ein Hauch von Coolness] an:

Perfekte vertikale Zentrierung, klicken Sie auf den Text, um ihn auszuwählen, verwenden Sie eine Tastenkombination, um ihn auszuwählen, bewegen Sie die Maus über den Text, um die Handform anzuzeigen (was bedeutet, dass er anklickbar ist)</p>
<input name="aaa" id="aaa" type="checkbox" value=""/> <label for="aaa">X×Ich bin ein perfektes Kontrollkästchen</label>

<input name="ccc" id="ccc" type="checkbox" accesskey="2" value=""/> <label for="ccc">Ich unterstütze die Auswahl mit Alt+2 über die Tastatur (<span>2</span>)</label>

<input name="bbb" id="bbb" type="radio" value=""/><label for="bbb">X×Ich bin ein perfektes Optionsfeld</label>

<label for="fff">X×Ich bin ein perfektes Textfeld</label><input id="fff" type="text"/>

<input name="eee" id="eee" type="checkbox" value=""/><span>Bilder können auch zentriert werden</span><img width="270" height="129" usemap="#mp" src="upload/2022/web/baidu_sylogo1.gif"/>
</div>
</body>
</html>

<<: Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

>>: Implementierungsschritte zum Aktivieren des Docker-Remote-Service-Links auf Cloud CentOS

Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung

Perfekte Lösung zur vertikalen Zentrierung von Formelementen

Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung

Bereitstellungsdokument für die Sicherheitseinstellungen des Win2008-Servers (empfohlen)

Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen

Detailliertes Tutorial zur Verwendung von Docker zum Erstellen von Gitlab basierend auf dem CentOS8-System

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)

Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren

PHP geplante Backup MySQL und mysqldump Syntax-Parameter detailliert

Detaillierte Erklärung der Truncate-Verwendung in MySQL

Eine einfache Möglichkeit, eine HTML-Fußzeile am unteren Ende der Seite einzufügen

Zusammenfassung einiger gängiger Schreibmethoden, die zu MySQL-Indexfehlern führen

Artikel empfehlen

Eine kurze Erläuterung des Sperrbereichs der MySQL-Next-Key-Sperre

So zeigen Sie die Zeitzone in MySQL an und ändern sie

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Detailliertes Tutorial zum Bereitstellen eines Springboot-Projekts mit Nginx auf dem Server (JAR-Paket)

Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?

So verstehen Sie das Ref-Attribut von React genau

Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)

Vergleich der Verwendung von Formularelementattributen schreibgeschützt und deaktiviert

Ein Artikel bringt Ihnen bei, sauberen JavaScript-Code zu schreiben

SQL-basierte Abfrageanweisungen

Detailliertes Tutorial zur Installation von MySQL 8.0.20 auf CentOS7.8

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Detailliertes Beispiel der Sortierfunktion field() in MySQL

Einführung in die Verwendung und den Unterschied zwischen „in“ und „exists“ in MySQL

Inhaltstypbeschreibung, d. h. der Typ des HTTP-Anforderungsheaders