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

A detailed introduction to the three installation methods of rpm, yum and source code under Linux

Perfect solution for vertical centering of form elements

A detailed introduction to the three installation methods of rpm, yum and source code under Linux

Vue implements multiple selections in the bottom pop-up window

MySQL 8.0.15 compressed version installation graphic tutorial

Example code for implementing dynamic skinning with vue+element

Detailed steps for installing and configuring mysql 5.6.21

CentOS7 uses yum to install mysql 8.0.12

Summary of basic usage of CSS3 @media

Implementation of React star rating component

Detailed explanation of Tomcat core components and application architecture

Detailed explanation of the code for implementing linear gradients with CSS3

Recommend

CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

How to reasonably use the redundant fields of the database

Vue-Element-Admin integrates its own interface to realize login jump

HTML table markup tutorial (37): background image attribute BACKGROUND

MySQL 5.7.20 compressed version download and installation simple tutorial

How to reset the root password in mysql8.0.12

Detailed explanation of the usage and function of MySQL cursor

Steps to modify the MySQL database data file path under Linux

Detailed Example of Row-Level Locking in MySQL

Example of implementing a 16:9 rectangle with adaptive width and height using CSS

A brief discussion on several specifications of JS front-end modularization

Solution for applying CSS3 transforms to background images

How to use IDEA to configure tomcat and create JSP files

Detailed explanation of Mysql's method of optimizing order by statement

Vue's vue.$set() method source code case detailed explanation