<div align="center" vertical-align="middle">
水平垂直居中文字
</div>
<style>
div{
border: 1px solid #000000;
width: 400px;
height: 400px;
margin: 0 auto;
line-height:400px;
}</style>
扩展资料：
html的规范（遵循）
1、一个html文件开始标签和结束的标签 <html> </html>
- 定义一个java方法 { }
2、html包含两部分内容
（1）<head> 设置相关信息</head>
（2）<body> 显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签，也要有结束标签
- <head></head>
4、html的代码不区分大小写的
5、有些标签，没有结束标签 ，在标签内结束
- 比如 换行 <br/> <hr/>
html的操作思想：网页中有很多数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），
通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html文字居中测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{background: #ddd;}
div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
.box1{background: #71a879;text-align: center;}
.box2{background: #6a8bbc;line-height: 200px;}
.box3{background: #dea46b;text-align: center;line-height: 200px;}
</style>
</head>
<body>
<div class="box1">html文字水平居中</div>
<div class="box2">html文字垂直居中</div>
<div class="box3">html文字水平上下居中</div>
</body>
</html>
实现效果如图所示
扩展资料
html文字居中的相关知识点
1、重点知识在于要知道在html中，让文字居中的css代码。
2、平水居中：text-align:center
text-align 属性规定了代码中文本的水平对齐方式。该属性通过指定行框与某个点对齐，从而设置块级元素内文本的水平对齐方式。
3、垂直居中：line-height:height
line-height 属性设置为行间的距离（行高），不允许使用负值。
参考资料：百度百科-HTML
text-align:center;//居中
如：<div class="jz">居中</div>
css为：.jz{text-align:center;}
方法2：在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight; content 清除浮动，并显示在中间。
html：<div id="floater"></div><div id="content">Content here</div> css:#floater{float:left; height:50%; margin-bottom:-120px;}#content {clear:both; height:240px; position:relative;}
方法3：定位：使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
html:<div id="content">Content here</div>
css:#content { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%;}
方法4：单行上下居中，可以设置行高为盒子高度，这样文字就可以上下居中。
即：line-height的高度要等于外面div的height。
稍微复杂一点可以用css的text-align:center属性
<center></center>标签的具体用法
在需要居中显示的地方加上<center></center>标签 如
<center>我要居中显示</center>
text-align:center的具体用法
<p style="text-align:center">我要居中显示</p>
已赞过
已踩过<
<div style="text-align:center"><p>文字居中</p></div>
看你需要多大的范围！
|
广告 您可能关注的内容 |
