vue如何實(shí)現(xiàn)垂直居中
vue垂直居中
有些時(shí)候沒(méi)有使用form表單，文字和輸入框/按鈕會(huì)出現(xiàn)不對(duì)齊的情況，此時(shí)需要將文字垂直居中。
情況如下：
很明顯是高了一點(diǎn)的
對(duì)文字進(jìn)行垂直居中vertical-align:middle
<span style="margin-left: 10px;vertical-align:middle">年度：</span>
加了之后的效果如下：
該屬性的作用是將元素盒子的垂直中點(diǎn)和父盒子的baseline加上父盒子的x-height的一半對(duì)齊。
繞來(lái)繞去的我也看不懂，在這里反正這么用就行了，具體的理解可以看別的文章。
vue div讓文字內(nèi)容水平垂直居中
思想
①讓文字先垂直居中，再水平居中；
②若遇到文字和div一起水平垂直居中，則外面再套一個(gè)div，先讓它倆都垂直居中，再內(nèi)部處理文字水平居中。
代碼
line-height: 100px; ?// 控制元素垂直距離 text-align: center; ?// 控制元素水平居中， 居左居右分別為left,right
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue router總結(jié) $router和$route及router與 router與route區(qū)別
這篇文章主要介紹了vue router總結(jié) $router和$route及router與 router與route區(qū)別，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
Vue動(dòng)態(tài)組件component的深度使用說(shuō)明
這篇文章主要介紹了Vue動(dòng)態(tài)組件component的深度使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Electron+vite+vuetify項(xiàng)目搭建的流程和方法
最近想用Electron來(lái)進(jìn)行跨平臺(tái)的桌面應(yīng)用開發(fā),同時(shí)想用vuetify作為組件,于是想搭建一個(gè)這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項(xiàng)目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06
Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3全局掛載使用Axios學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問(wèn)題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項(xiàng)目打包生成的文件,資源文件報(bào)404問(wèn)題的修復(fù)方法,需要的朋友可以參考下2018-01-01
vue3.0公共組件自動(dòng)導(dǎo)入的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng)
這篇文章主要介紹了基于Vue3+Three.js實(shí)現(xiàn)一個(gè)3D模型可視化編輯系統(tǒng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來(lái)遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
這篇文章主要介紹了iphone劉海屏頁(yè)面適配方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue導(dǎo)出word純前端的實(shí)現(xiàn)方式
這篇文章主要介紹了vue導(dǎo)出word純前端的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04