css - DIV 讓數(shù)字水平垂直置中？
問(wèn)題描述
.unsolve{ position: absolute; right: 10px; top:50%; transform: translate(0,-50%); z-index: 1; font-size: 13px; background-color: red; border-radius: 50%; color:#fff; width: 15px; height: 15px; padding: 5px; text-align: center;}
<p class='unsolve'>12</p>
這樣設(shè)定的時(shí)候，數(shù)字都會(huì)中間偏下，沒(méi)辦法完全中間。請(qǐng)問(wèn)該怎麼讓他完全水平垂直置中？
問(wèn)題解答
回答1：
.unsolve {position: absolute;right: 10px;top:0;bottom: 0;margin:auto;z-index: 1;font-size: 13px;background-color: red;border-radius: 50%;color:#fff;width: 15px;height: 15px;line-height: 15px;padding:5px;text-align: center; }回答2：
不用這么麻煩單行文字 將行高 line-height 和 height 設(shè)為相等即可多行文字需要將文字抱在p標(biāo)簽中 外層p display:table 內(nèi)層p display:table-cell
回答3：text-align:center; + line-height:容器元素高度
回答4：既然你都設(shè)置 height 了，那就直接設(shè)置 line-height 吧
回答5：**設(shè)置一下行高就好了 transform: translate(0,-50%) 這句 可以 刪除**
回答6：單行的垂直居中 使用line-height 即可。
回答7：p中單行文字垂直居中，設(shè)置line-height和height兩個(gè)屬性，且兩者值相同即可實(shí)現(xiàn)。
相關(guān)文章：
1. javascript - node得到req不能得到boolean2. node.js - nodejs+express+vue3. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑！求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦，實(shí)在是找不到哪里的問(wèn)題了。4. mysql時(shí)間格式問(wèn)題5. javascript - 我的站點(diǎn)貌似被別人克隆了， google 搜索特定文章，除了域名不一樣，其他的都一樣，如何解決？6. python對(duì)8000行csv添加列7. DADB.class.php文件的代碼怎么寫8. 使用mysql命令行連接遠(yuǎn)程數(shù)據(jù)庫(kù)host跳轉(zhuǎn)9. java - web端百度網(wǎng)盤的一個(gè)操作為什么要分兩次請(qǐng)求服務(wù)器, 有什么好處嗎10. python 字符串匹配問(wèn)題
網(wǎng)公網(wǎng)安備