简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

文本如何做到垂直居中对齐_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:31:22
原创
1601 人浏览过

文本如何做到垂直居中对齐:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
网页布局中经常用到让文本在一行中垂直居中对齐。默认情况下文本是居上对齐的。
实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest {  width: 200px;  height: 40px;  line-height: 40px;  border: 1px solid blue;}</style></head><body><div class="mytest">大家好，我要居中对齐</div></body></html>
登录后复制

以上代码可以将div中的文本垂直居中对齐，对齐的方法就是把div的height属性值和line-height的属性值设为相等即可达到文本垂直居中效果，上面代码中两个属性值都设置为40px。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4762

更多内容可以参阅:http://www.softwhy.com/divcss/

相关标签：
文本如何做到垂直居中对齐
来源：php.cn
上一篇：兼容所有浏览器的圆角矩形效果代码实例_html/css_WEB-ITnose 下一篇：CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
来自于 2024-04-06 22:01:35
0
3
816
将导航栏居中对齐 您好，我正在尝试在页面顶部的中间设置一个导航栏。我尝试过文本对齐，将项目对齐为中心，但到目前为止我没有运气，有谁知道如何在页面中间对齐此导航菜单？/*Clearfix*/.clea...
来自于 2024-04-02 09:56:33
0
2
306
创建一个类似于toast ui主页的导航栏 我的灵感来源我想制作这样的导航栏：Toastui主页我做了什么我尝试尽可能多地复制来实现这一目标。我得到以下信息：我想要什么我想要像这样的（这些是通过图像编辑制作的）：选项1：居中...
来自于 2024-04-01 18:34:38
0
1
240
我无法将屏幕上的任何内容居中对齐 我正在关注YouTube教程，了解如何使用CSS在HTML上制作响应式导航栏，一切都很顺利，直到我尝试在屏幕中央添加文本，它出现在屏幕左侧（仅当窗口分辨率高于952px宽时）。我对...
来自于 2024-04-01 11:51:40
0
2
303
在 Javascript 中编辑动态创建的文本 我正在创建一个“社交媒体评论部分”（您可以通过在底部的评论框中输入内容来添加您自己的评论。）我想添加一个编辑按钮，该按钮可以更改为对于单击编辑按钮的任何评论。我非常不熟悉如何做到这...
来自于 2024-03-31 14:17:41
0
1
364
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！