怎样让html中的文字垂直水平居中显示
制作网页的时候，为了使页面更加美观，前端工程师一般会把文字水平垂直居中，那么怎样让html中的文字垂直水平居中显示呢？如图，先在HTML编辑器里面写上一些基础代码，这里我就不多说了。
接着在body标签里面添加一个div标签，div里面有文字，并且使用style标签来设置div的样式。Div的样式我设置为宽高200像素，背景为红色。
接着在网页中预览文件，可以看到文字默认是左对齐。
接着我们在div的样式里面写上“text-align: center; line-height: 200px;”，text-align: center;表示水平居中，line-height: 200px;表示垂直居中，line-height的属性要根据文字所在的标签的高度来设置，比如我的文字是在div里面，div是200px，就设置200px，如果你的div或者其他标签是400px，就设置400px。
最后，再来预览效果，文字已经水平垂直居中了。
绛旓細鍙互浣跨敤鈥渢ext-align鈥濆睘鎬ц鏂囧瓧姘村钩灞呬腑锛屼娇鐢ㄢ渓ing-height鈥濆睘鎬ц鏂囧瓧鍨傜洿灞呬腑銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔燿iv鏍囩骞跺～鍐欎竴娈垫枃瀛楋紝鐒跺悗涓鸿繖涓猟iv璁剧疆涓浜涙牱寮忥細2銆佷负div娣诲姞鈥渢ext-align鈥濆睘鎬э紝灞炴у间负鈥渃enter鈥濓紝杩欐椂鏂囧瓧灏嗕細鍦ㄦ鍐呮按骞冲眳涓細3銆佷负div娣诲姞鈥渓ine-height鈥濆睘鎬э紝灞炴у间负...
绛旓細鎺ョ潃鍦ㄧ綉椤典腑棰勮鏂囦欢锛屽彲浠ョ湅鍒版枃瀛楅粯璁ゆ槸宸﹀榻愩傛帴鐫鎴戜滑鍦╠iv鐨勬牱寮閲岄潰鍐欎笂鈥渢ext-align: center; line-height: 200px;鈥濓紝text-align: center;琛ㄧず姘村钩灞呬腑锛宭ine-height: 200px;琛ㄧず鍨傜洿灞呬腑锛宭ine-height鐨勫睘鎬ц鏍规嵁鏂囧瓧鎵鍦ㄧ殑鏍囩鐨勯珮搴︽潵璁剧疆锛屾瘮濡傛垜鐨勬枃瀛鏄湪div閲岄潰锛宒iv鏄200px锛屽氨璁剧疆...
绛旓細1銆佸鍥撅紝鎴戜滑鍒涘缓涓涓洅瀛愶紝鐒跺悗涓棿杈撳叆鏂囧瓧淇℃伅 2銆佸綋鎴戜滑瀵圭洅瀛愭坊鍔犱簡杈规棰滆壊鍚庯紝娴忚鍣ㄦ晥鏋滃鍥炬墍绀猴紝鏂囧瓧鍦ㄥ乏渚х涓琛屼綅缃 3銆佹兂瑕佹枃瀛楀眳涓紝鍙互杈撳叆text-align杩欎釜鏂囧瓧鐨勫榻愭牱寮忎簡锛岀劧鍚庡湪灞炴т腑杈撳叆center涓棿鐨勬剰鎬濓紝灏辨槸灏嗘枃瀛楀湪姘村钩浣嶇疆灞呬腑 4銆佸鍥撅紝杩欐牱灏辨槸鏂囧瓧鍦ㄦ按骞充綅缃笂鐨勫眳涓簡 5銆...
绛旓細鎺ヤ笅鏉ユ垜浠氨闇瑕佷负鏂囧瓧鍏冪礌娣诲姞涓瀹氱殑瀵归綈鏂瑰紡锛棣栧厛鎴戜滑璁╁叾灞呬腑瀵归綈锛屽嵆浣跨敤text-align:center;浣跨敤涔嬪悗鍦ㄦ祻瑙堝櫒涓繘琛屾晥鏋滄煡鐪锛屽彲浠ュ緢娓呮鐨勭湅鍒帮紝鏂囧瓧鐩稿浜庝箣鍓嶉潬鍙冲榻愪簡銆傛垜浠彲浠ヤ粠涓婁竴涓浘涓湅鍒帮紝鏂囧瓧鍦ㄥ瀭鐩存柟鍚戜笂杩樻槸涓嶅榻愮殑锛屾帴涓嬫潵鎴戜滑灏遍渶瑕佷负鏂囧瓧娣诲姞鍨傜洿瀵归綈鏍峰紡锛宭ine-height锛屾垜浠渶瑕佸皢...
绛旓細web鏂囧瓧鍨傜洿灞呬腑鎬庝箞璁剧疆锛熷瓧浣撴按骞冲眳涓 鍦–SS涓紝鍙互浣跨敤text-align灞炴ф潵璁╂枃瀛楁按骞冲眳涓銆倀ext-align灞炴ц瀹氬厓绱犱腑鐨勬枃鏈殑姘村钩瀵归綈鏂瑰紡锛岃缃间负center鍒欏彲瀹炵幇鏂囨湰鏂囧瓧姘村钩灞呬腑瀵归綈銆倀ext-align灞炴ч氳繃鎸囧畾琛屾涓庡摢涓偣瀵归綈锛屼粠鑰岃缃潡绾у厓绱犲唴鏂囨湰鐨勬按骞冲榻愭柟寮忋傞氳繃鍏佽鐢ㄦ埛浠ｇ悊璋冩暣琛屽唴瀹逛腑瀛楁瘝鍜屽瓧...
绛旓細瑕佽鏂囧瓧鍦℉TML缃戦〉涓眳涓紝浣犲彲浠ヤ娇鐢–SS鏉ヨ缃枃鏈殑灞呬腑瀵归綈鏂瑰紡銆備互涓嬫槸鍑犵甯歌鐨勬柟娉曪細鏂囨湰姘村钩灞呬腑锛氫娇鐢–SS鐨則ext-align灞炴ф潵姘村钩灞呬腑鏂囨湰銆傚皢璇ュ睘鎬у簲鐢ㄤ簬鍖呭惈鏂囨湰鐨凥TML鍏冪礌锛屽<div>鎴<p>銆<style>.center-text { text-align: center;}</style><div class="center-text">杩欐槸灞呬腑鐨...
绛旓細姘村钩鏂瑰悜浣犲彲浠ラ氳繃text-align瀹氫箟锛鍨傜洿鏂瑰悜涓婄‘瀹炴湁涓涓獀ertical-align锛屼絾杩欎釜灞炴ф墍璋撶殑瀵归綈鏄浉瀵逛簬鍏朵粬鍏冪礌鐨勶紝姣斿浣犵殑鍚屼竴琛鐨勬枃瀛鍓嶉潰鏈変竴寮犲浘鐗囷紝杩欎釜鏃跺欓粯璁ょ殑鏄枃瀛楃殑搴曢儴涓庡浘鐗囩殑搴曢儴瀵归綈鐨勭殑锛屽彧瑕佽繖涓椂鍊欎綘璁剧疆鍥剧墖鐨剉ertical-align灞炴э紝鍗冲彲浠ユ敼鍙樺浘鐗囦笌鏂囧瓧鐨勫榻愭柟寮忋傞偅涔鎬庝箞鎺у埗鏂囧瓧鐨...
绛旓細1銆佹柊寤html鏂囦欢锛屽湪body鏍囩涓坊鍔燿iv鏍囩锛屽湪div鏍囩杈撳叆鏂囧瓧锛岃繖閲屼互鈥滄紨绀鏂囨湰鈥濅负渚嬶紝缁檇iv鏍囩璁剧疆瀹藉害銆侀珮搴﹀拰鑳屾櫙鑹插睘鎬э紝灞炴у煎垎鍒负200銆100鍜岀伆鑹诧紝杩欐椂鈥滄紨绀烘枃鏈濋粯璁や綅缃负div鐩掑瓙鐨勫乏涓婃柟锛2銆佽繖鏃剁粰div鏍囩娣诲姞涓娾渢ext-align鈥濆睘鎬э紝灞炴у间负鈥渃enter鈥濓紝杩欐椂鏂囧瓧灏嗕細鍦╠iv瀹瑰櫒涓按骞...
绛旓細html涓鏂囧瓧绔栨帓鐨勬柟娉曪細涓锛屽師濮嬩娇鐢╳riting-mode灞炴с1锛岃娉曪細writing-mode:lr-tb鎴杦riting-mode:tb-rl銆2锛屽弬鏁帮細锛1锛塴r-tb锛氫粠宸﹀悜鍙筹紝浠庝笂寰涓 锛2锛塼b-rl锛氫粠涓婂線涓嬶紝浠庡彸鍚戝乏 杩愯浠ｇ爜鍙戠幇锛孖E鏄剧ず姝ｅ父锛岀伀鐙愩佽胺姝屾祻瑙堝櫒鍗翠笉鏀寔锛屾墍浠ヤ笉寤鸿浣跨敤writing-mode灞炴с備簩銆佷娇鐢–SS妯℃嫙鏂囧瓧...
绛旓細鍥炵瓟锛HTML涓琛ㄦ牸鍚堝苟鍗曞厓鏍煎悗鏂囧瓧鍨傜洿灞呬腑鐨勬柟娉:缁欏崟鍏冩牸鏍峰紡鍔犱笂 valign="middle",鏂囧瓧灏卞瀭鐩村眳涓榻愪簡 HTML琛ㄦ牸灞炴: border:姝ゅ睘鎬у畾涔夎〃鏍肩殑杈规銆傛瘮濡,border=1,琛ㄧず琛ㄦ牸杈规鐨勭矖缁嗕负1涓儚绱(榛樿鍊),涓0琛ㄧず娌℃湁杈规銆 cellspacing:鍗曞厓鏍奸棿璺濄傚綋涓涓〃鏍兼湁澶氫釜鍗曞厓鏍兼椂,鍚勫崟鍏冩牸鐨勮窛绂诲氨鏄...
