单行文字垂直居中，多行文字垂直居中
生活随笔
收集整理的這篇文章主要介紹了
单行文字垂直居中，多行文字垂直居中
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這里通過(guò)下面一個(gè)實(shí)例來(lái)講一下單行文字居中和多行文字居中的方法：
一、單行文字居中
原理：
使用height 和 line-height，相等的原理。二、多行文字居中
原理：
將多行文字當(dāng)做一張圖片去處理，使其居中。代碼：
<html><head><title>Mr企鵝先森</title> <style type="text/css">html{font-size: 14px; }.only{border: 1px solid red;padding: 10px 10px;height: 30px;line-height: 30px;}.box_2{display: table-cell;width: 550px;height: 1.14rem;padding: 2rem 2rem;border: 4px solid #beceeb;color: #069;font-size: 10rem;vertical-align: middle;}.word{display:inline-block; font-size:0.1rem; }</style></head><body><div class="only">111111111</div><div class="box_2"><span class="word">這里顯示多行文字。vrbrtbtrnyynnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnbntrsssssssssssssssssgerrfewe23e23r3433g43g343fr2323r23nnnnnnnnnnnnnnnnnnryooooooooooooooooooooooooooooooooooooooooooooooooooooo</span></div></body> </html>效果
總結(jié)
以上是生活随笔為你收集整理的单行文字垂直居中，多行文字垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 王者荣耀中谁和甄姬是情侣 《王者》在线观
- 下一篇： ES6常用数组方法