vue如何實(shí)現(xiàn)垂直居中
更新時(shí)間：2022年09月09日 09:53:25 作者：芝士焗紅薯
這篇文章主要介紹了vue如何實(shí)現(xiàn)垂直居中，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue垂直居中
有些時(shí)候沒有使用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ì)齊。
繞來繞去的我也看不懂，在這里反正這么用就行了，具體的理解可以看別的文章。
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實(shí)現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
這篇文章主要介紹了vue實(shí)現(xiàn)input文本框只能輸入0-99的正整數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)一個(gè)單文件組件的完整過程記錄
整個(gè)項(xiàng)目結(jié)構(gòu)清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個(gè)組件的邏輯都沒有過于復(fù)雜,所以這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)一個(gè)單文件組件的相關(guān)資料,需要的朋友可以參考下2021-06-06
一步步教你利用webpack如何搭一個(gè)vue腳手架（超詳細(xì)講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個(gè)vue腳手架的相關(guān)資料，文中有超詳細(xì)講解和注釋，對(duì)大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路
這篇文章主要介紹了Vue3中多個(gè)彈窗同時(shí)出現(xiàn)的解決思路,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
基于vue+openlayer實(shí)現(xiàn)地圖聚合和撒點(diǎn)效果
Openlayers 是一個(gè)模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進(jìn)行交互，具有靈活的擴(kuò)展機(jī)制，本文給大家介紹vue+openlayer實(shí)現(xiàn)地圖聚合效果和撒點(diǎn)效果，感興趣的朋友一起看看吧2021-09-09
在Vue進(jìn)行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關(guān)于VUE事件處理之@click用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue 圖片裁剪上傳組件的實(shí)現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09