表單元素完美垂直居中

2022-06-14 04:42:08 字數 2042 閱讀 9179

>表單元素完美垂直居中

title

>

<

style

type

="text/css"

>

*body

label

input

.warp

span

imgp

h2style

>

head

>

<

body

>

<

div

class

="warp"

>

<

h2>單選框和核取方塊面積很小,不容易點選,造成許多使用者的困擾,使用者體驗不佳

h2>

<

p>請看【一絲冰涼】的完美解決方案:<

br />

完美垂直居中,點選文字可選,快捷鍵可選,滑鼠在文字上顯示手型(暗示可點選)

p>

<

input

name

="aaa"

id="aaa"

type

="checkbox"

value

=""/>

<

label

for="aaa"

>x×我是完美的核取方塊

label

>

<

br />

<

input

name

="ccc"

id="ccc"

type

="checkbox"

accesskey

="2"

value

=""/>

<

label

for="ccc"

>我支援鍵盤 alt+2選擇(<

span

>2

span

>)

label

>

<

br />

<

input

name

="bbb"

id="bbb"

type

="radio"

value

=""/><

label

for="bbb"

>x×我是完美的單選框

label

><

br />

<

label

for="fff"

>x×我是完美的文字框

label

><

input

id="fff"

type

="text"

/><

br />

<

input

name

="eee"

id="eee"

type

="checkbox"

value

=""/><

span

>也能居中

span

><

img

width

="270"

height

="129"

usemap

="#mp"

src=""

/>

div>

body

>

html

>

表單元素垂直居中完美解決方案

複製 如下 span class gukqnfqdoh xhtml 1.0 transitional en 表單元素完美垂直居中 請看 一絲冰涼 的完美解決方案 完美垂直居中,點選文字可選,快捷鍵可選,滑鼠在文字上顯示手型 暗示可點選 x我是完美的核取方塊 程式設計客棧 我支援鍵盤 alt 2選擇 ...

vertical align表單元素垂直對齊(4)

於是,嘗試去掉radio的外邊距,重新整理後顯示正常。其實多選框checkbox也是有外邊距的,只是它的外邊距四個方向都有,並且相等,所以對於垂直對齊沒有影響。下圖是一些常用表單元素的最終顯示效果以及最終 大家可以用不同瀏覽器看一下實際的效果 注 由於演示使用的12px的中文實際只有11px高,而 ...

元素垂直居中

1 單行文字的居中 主要實現css 水平居中 text align center 垂直居中 line height xxpx line height與元素的height的值一致 我們先來看這樣乙個例子,加入我們這裡有乙個div,寬度和高度為300px,背景顏色為黑色,然後在div中有一行簡短文字,我...