vue如何實現(xiàn)垂直居中
更新時間：2022年09月09日 09:53:25 作者：芝士焗紅薯
這篇文章主要介紹了vue如何實現(xiàn)垂直居中，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue垂直居中
有些時候沒有使用form表單，文字和輸入框/按鈕會出現(xiàn)不對齊的情況，此時需要將文字垂直居中。
情況如下：
很明顯是高了一點的
對文字進行垂直居中vertical-align:middle
<span style="margin-left: 10px;vertical-align:middle">年度：</span>
加了之后的效果如下：
該屬性的作用是將元素盒子的垂直中點和父盒子的baseline加上父盒子的x-height的一半對齊。
繞來繞去的我也看不懂，在這里反正這么用就行了，具體的理解可以看別的文章。
vue div讓文字內容水平垂直居中
思想
①讓文字先垂直居中，再水平居中；
②若遇到文字和div一起水平垂直居中，則外面再套一個div，先讓它倆都垂直居中，再內部處理文字水平居中。
代碼
line-height: 100px; ?// 控制元素垂直距離 text-align: center; ?// 控制元素水平居中， 居左居右分別為left,right
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)input文本框只能輸入0-99的正整數問題
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
整個項目結構清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個組件的邏輯都沒有過于復雜,所以這篇文章主要給大家介紹了關于vue實現(xiàn)一個單文件組件的相關資料,需要的朋友可以參考下2021-06-06
一步步教你利用webpack如何搭一個vue腳手架（超詳細講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關資料，文中有超詳細講解和注釋，對大家學習或者使用webpack具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要介紹了Vue3中多個彈窗同時出現(xiàn)的解決思路,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
基于vue+openlayer實現(xiàn)地圖聚合和撒點效果
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數據，并與之進行交互，具有靈活的擴展機制，本文給大家介紹vue+openlayer實現(xiàn)地圖聚合效果和撒點效果，感興趣的朋友一起看看吧2021-09-09
在Vue進行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關于VUE事件處理之@click用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了使用vue實現(xiàn)一個電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了vue 圖片裁剪上傳組件的實現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09