Perfect solution for vertical centering of form elements

Copy code

The code is as follows:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Perfect vertical centering of form elements</title>
<style type="text/css">
*{padding:0; margin:0;}
body{font:14px/1.231 Tahoma, Geneva, sans-serif; background-color:#D1D5E7;}
label{cursor:pointer; vertical-align:middle;}
input{vertical-align:middle; margin:5px;}
.warp{ margin:100px 350px;}
span{ vertical-align:middle; text-decoration:underline;}
img{ vertical-align:middle; border:1px solid #CCF;_margin-bottom:1px;}
p{font-size:14px;}
h2{font-size:16px;}
</style>
</head>
<body>
<div class="warp">
<h2>Radio boxes and check boxes are very small and not easy to click, which causes confusion for many users and a poor user experience</h2>
<p>Please see the perfect solution of [A touch of coolness]:

Perfect vertical centering, click on the text to select it, shortcut key to select it, mouse over the text to show hand shape (implying clickable)</p>
<input name="aaa" id="aaa" type="checkbox" value=""/> <label for="aaa">X×I am a perfect checkbox</label>

<input name="ccc" id="ccc" type="checkbox" accesskey="2" value=""/> <label for="ccc">I support keyboard Alt+2 selection (<span>2</span>)</label>

<input name="bbb" id="bbb" type="radio" value=""/><label for="bbb">X×I am a perfect radio button</label>

<label for="fff">X×I am a perfect text box</label><input id="fff" type="text"/>

<input name="eee" id="eee" type="checkbox" value=""/><span>Pictures can also be centered</span><img width="270" height="129" usemap="#mp" src="upload/2022/web/baidu_sylogo1.gif"/>
</div>
</body>
</html>

<<: MySQL slave library Seconds_Behind_Master delay summary

>>: Implementation steps for enabling docker remote service link on cloud centos

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

Perfect solution for vertical centering of form elements

Detailed tutorial on installing MySQL 5.7.20 on RedHat 6.5/CentOS 6.5

VMware kali virtual machine environment configuration method

Solution to Ubuntu cannot connect to the network

Methods and steps for deploying GitLab environment based on Docker

A bug fix for Tomcat's automatic shutdown

Implementing a random roll caller based on JavaScript

Detailed explanation of several ways to remove the gap between inline-block elements in CSS

Native JS to implement hover drop-down menu

React implements a highly adaptive virtual list

When modifying a record in MySQL, the update operation field = field + string

Recommend

Various methods to restart Mysql under CentOS (recommended)

JavaScript realizes the drag effect of modal box

MySQL date processing function example analysis

Detailed tutorial on how to automatically install CentOS7.6 using PXE

Summary and examples of vue3 component communication methods

vue-pdf realizes online file preview

Explanation of the configuration and use of MySQL storage engine InnoDB

Detailed explanation of how to connect to MySQL database using Java in IntelliJ IDEA

Detailed explanation of the steps to create a web server with node.js

mysql update case update field value is not fixed operation

Detailed explanation of Linux remote management and sshd service verification knowledge points

A few things you need to know about responsive layout

Detailed tutorial on installing MySQL 5.7.19 decompressed version on Windows Server 2016

Detailed explanation of nginx request header data reading process

Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?