div内容居中_HTML中怎么使⽂字各种居中对齐？（代码⽰
例）
本篇⽂章主要介绍了如何去写关于html⽂字居中代码。希望对有需要的朋友有所帮助。
程序猿的⽣活：前端10K⾯试准备，最完整⾯试真题分享（含答案）！z huanlan.zhihu
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;}
css设置文字垂直居中</style>
</head>
<body>
<div  class="box1">html⽂字⽔平居中</div>
<div  class="box2">html⽂字垂直居中</div>
<div  class="box3">html⽂字⽔平上下居中</div>
</body>
</html>
以上代码效果在本地测试如下图：
那么通过本篇⽂章关于html⽂字居中的相关知识是否有更进⼀步的了解呢？其实这⾥我们主要记住这些关键点，在html中，让⽂字居中的css代码：
程序猿的⽣活：打造全⽹web前端全栈资料库（总⽬录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）z huanlan.zhihu 1、平⽔居中：text-align:center；
text-align 属性规定元素中的⽂本的⽔平对齐⽅式。
该属性通过指定⾏框与哪个点对齐，从⽽设置块级元素内⽂本的⽔平对齐⽅式。通过允许⽤户代理调整⾏内容中字母和字之间的间隔，可以⽀持值 justify；不同⽤户代理可能会得到不同的结果。
2、垂直居中：line-height:height;
line-height 属性设置⾏间的距离（⾏⾼）。
注释：不允许使⽤负值。
以上就是HTML中怎么使⽂字各种居中对齐？（代码⽰例）的详细内容，更多请关注我！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。