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
Recommend
How to reset your Linux password if lost
1. The startup menu is to move the cursor to the ...
SQL uses ROW_NUMBER() OVER function to generate sequence number
Syntax: ROW_NUMBER() OVER(PARTITION BY COLUMN ORD...
Javascript implements simple navigation bar
This article shares the specific code of Javascri...
Detailed tutorial on installing MySQL 8.0.19 in zip version on win10
Table of contents 1. After downloading, unzip it ...
Manually implement the two-way data binding principle of Vue2.0
In one sentence: Data hijacking (Object.definePro...
The latest Linux installation process of tomcat8
Download https://tomcat.apache.org/download-80.cg...
Detailed explanation of how to upgrade software package versions under Linux
In the Linux environment, you want to check wheth...
jQuery plugin to implement dashboard
The jquery plug-in implements the dashboard for y...
Solution to the problem that mysql local login cannot use port number to log in
Recently, when I was using Linux to log in locall...
js to realize web music player
This article shares simple HTML and music player ...
11 ways to remove duplicates from js arrays
In actual work or interviews, we often encounter ...
Vue implements tree table
This article example shares the specific code of ...
WeChat applet implements form verification
WeChat applet form validation, for your reference...
Solution to find all child rows for a given parent row in MySQL
Preface Note: The test database version is MySQL ...
Function overloading in TypeScript
Table of contents 1. Function signature 2. Functi...