checkbox和後面文字無法居中對齊的解決方案

2021-07-11 05:34:38 字數 642 閱讀 1623

在製作前端頁面時,表單的頁面中有時會存在表單元素與提示文字無法對齊的問題。

下面是針對這一問題的解決方案:

先上結果圖看效果,吼吼~

最上面兩個是經過css處理後的效果,已經居中對齊了哦~,最後乙個是沒有處理的效果,明顯沒有對齊。解決的關鍵是vertical-align:middle屬性,一定要給input標籤和文字的標籤同時加上該屬性。對於純英文的內容而言,這樣就可以了,但是對於包含中文內容的,如果此時仍沒有居中對齊,就需注意一下字型的設定了。經過測試,當把字型設定為arial或tahoma後,問題解決。下面是例子的原始碼:

例子的html**

樂意黎

前端常見問題 安卓文字無法垂直居中

安卓 webview 的字型大小在小於 12 畫素的時候無法使用行高來垂直居中 table 布局 文字偏上 hot 熱門 flex 布局 文字偏上 hot 熱門 transform 縮放 文字居中了,但是 transform 不能還原元素在 dom 上的占用區域大小 hot 熱門 zoom 縮放 文...

關於checkbox與文字混排無法對齊的解決方法

先前 如下 html view plain copy span style vertical align middle input type checkbox name send message item 禁止解析bbcode span 如此無法居中,改變後 如下 html view plain c...

css 文字和div垂直居中方法彙總

id div1 這是單行文字垂直居中 div css div1 id div1 這是多行文字垂直居中,這是多行文字垂直居中,這是多行文字垂直居中,這是多行文字垂直居中。div css div1 id outer id middle 這是固定高度多行文字垂直居中,這是固定高度多行文字垂直居中,這是固定...