>表單元素完美垂直居中
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中有一行簡短文字,我...