Perfekte Lösung zur vertikalen Zentrierung von Formelementen

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

Artikel empfehlen

Die beste Lösung zur Implementierung digitaler Plus- und Minus-Buttons mit reinem CSS

Vorwort: Für die Implementierung digitaler Additi...

Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren

Vorwort Dieser Artikel stellt hauptsächlich die r...

Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen

Bei der täglichen Arbeit müssen wir häufig Protok...

Lösung für SQL Server-Datenbankfehler 5123

Weil ich ein Datenbank-Tutorial habe, das auf SQL...

JavaScript imitiert die Spezialeffekte der Jingdong-Lupe

In diesem Artikel wird der spezifische Code von J...

So verwenden Sie Axios, um mehrere wiederholte Anfragen in einem Projekt zu filtern

Inhaltsverzeichnis 1. Einleitung: In diesem Fall ...

Sprechen Sie über die 8 Benutzerinstinkte hinter der Benutzererfahrung im Design

Anmerkung des Herausgebers: Dieser Artikel wurde ...

Eine kurze Diskussion darüber, wie man Div und Tabelle auswählt und kombiniert

Das Seitenlayout war mir schon immer ein Anliegen...

8 Gründe, warum Sie die Xfce-Desktopumgebung für Linux verwenden sollten

Aus verschiedenen Gründen (einschließlich Neugier...

js canvas realisiert Bilder mit abgerundeten Ecken

In diesem Artikel wird der spezifische Code von J...

Absatzlayout und Zeilenumbrüche in HTML-Webseiten

Das Erscheinungsbild einer Webseite hängt maßgebl...

Lernen Sie MySQL-Datenbanken in einer Stunde (Zhang Guo)

Inhaltsverzeichnis 1. Datenbankübersicht 1.1 Entw...

Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen

Inhaltsverzeichnis 1. Einleitung 1. Grundlayout 2...

Allgemeine Download-, Installations- und Konfigurationsmethoden und einfache Bedienungskenntnisse für MySQL 5.7.20 (kostenlose Installation der Dekomprimierungsversion)

Ich habe gerade am frühen Morgen die Installation...

Beispielcode zur Implementierung der Anmeldung mit Bestätigungscode in der SMS-API in Node

1. Node-Server einrichten + Datenbankverbindung D...