如何讓html提交按鈕居中 在一個div中如何讓button按鈕垂直居中?
在一個div中如何讓button按鈕垂直居中?1. 首先,我們需要創(chuàng)建一個新的HTML5文件并編寫基本的HTML5代碼。2. 創(chuàng)建一個新的div標記,并在div標記下面寫一個button標記。3. 填
在一個div中如何讓button按鈕垂直居中?
1. 首先,我們需要創(chuàng)建一個新的HTML5文件并編寫基本的HTML5代碼。
2. 創(chuàng)建一個新的div標記,并在div標記下面寫一個button標記。
3. 填寫div標簽和button標簽的基本樣式代碼。這里我們將div的背景設(shè)置為紅色,以便更好地查看居中情況。
4. 當我們用瀏覽器打開頁面時,我們可以看到div層中按鈕的左上角。
5. 下一步是實現(xiàn)垂直中心法。首先,我們將div的行高設(shè)置為div層的高度,并將button的垂直對齊屬性設(shè)置為middle。
6. 刷新頁面,發(fā)現(xiàn)按鈕已經(jīng)垂直居中在Div中了
為什么有些前端一直用div當按鈕,而不是用button?
事實上,W3C標準有時很無聊。對于這個標準,這個不能用,那個不能用。
還有各種各樣的標簽讓人眼花繚亂,反正多了又砸,很多標簽可以互相替代。在一定程度上,它對開發(fā)者不友好,增加了學習成本。
標準統(tǒng)一雖然是好事,但太標準也是一件麻煩的事。
例如,按鈕是綁定事件的按鈕。但現(xiàn)在看來,這種風格太難看了。如果你想美化它,你必須去邊境等。還有一個按鈕,你在里面嵌套一個圖,然后添加事件。先別說是否符合標準。看到它很不舒服。這不是巴頓應(yīng)該做的。
所以現(xiàn)在不方便使用按鈕。無論如何,大多數(shù)事件元素都可以添加,而且比按鈕更容易使用。
所以可以使用div模擬
CSS來實現(xiàn)div居中。有許多方法可以通過CSS實現(xiàn)div居中。這一次,我將教你一段相對簡單、兼容性很強的代碼。進來看看。
需要兩個主要的CSS代碼,一個是文本-對齊:居中(內(nèi)容在中間),另一個是邊距:0自動這兩種樣式需要結(jié)合使用才能實現(xiàn)div-box的集中顯示。
首先,我們將文本設(shè)置為正文-對齊:居中和然后為需要居中的div框設(shè)置CSS樣式邊距:0自動這樣,相應(yīng)的div可以水平居中。
Div定心代碼應(yīng)用,為了觀察Div定心的效果,我們設(shè)置了一個名為“的Div”。Div”在HTML的Div標記中,使用class=“Div”,將其寬度設(shè)置為400px,高度設(shè)置為100px,邊框設(shè)置為紅色。這樣我們才能看到效果。
1. 完整的HTML CSS代碼
<!DOCTYPE HTML><html><head><meta charset=“UTF-8”/><title>div Center</Title><style> body{text}-對齊:居中}.div{邊距:0自動寬度:400px高度:100像素邊框:1px實心#F00}/*CSS注意:要觀察效果,請設(shè)置寬度、邊框高度和其他樣式*/</style></head><body>&Ltdiv class=“div”> div centering</div></body></HTML>
渲染:
這種居中方法使div居中效果與所有主要平臺和瀏覽器完全兼容,無論是高版本IE還是高版本IE。