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

Perfect solution for vertical centering of form elements

Solution for Baidu site search not supporting https (tested)

Detailed explanation of Vue mixin

Several methods of implementing two fixed columns and one adaptive column in CSS

Implementation example of react project from new creation to deployment

Complete steps for deploying confluence with docker

Mysql auto-increment primary key id is not processed in this way

How to implement one-click deployment of nfs in linux

Creating private members in JavaScript

vue.js downloads pictures according to picture url

Analysis of HTTP interface testing process based on postman

Recommend

MySQL turns off password strength verification

How to modify the root password of mysql in docker

Windows 10 + mysql 8.0.11 zip installation tutorial detailed

How to use explain to query SQL execution plan in MySql

Web page text design should be like smart girls wearing clothes

Detailed analysis and testing of SSD performance issues in MySQL servers

Detailed explanation of Vue-router nested routing

MySQL 8.0 Window Function Introduction and Summary

Vue implements a shopping cart that can change the shopping quantity

How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter

List of commonly used escape codes for HTML greater than, less than, spaces, quotation marks, etc.

How does MySQL achieve multi-version concurrency?

Detailed example of getting the maximum value of each group after grouping in MySQL

How to install MySQL 5.7.29 with one click using shell script

Detailed explanation of MYSQL database table structure optimization method