元素在div中水平居中

最新推荐文章于 2023-10-16 17:56:08 发布

bcbobo21cn

最新推荐文章于 2023-10-16 17:56:08 发布

阅读量249

点赞数

分类专栏： web前端文章标签： css html5 前端块级元素

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/132353562

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

先看一下行级元素在div中水平居中；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div demo </title>
<style>
body {
	background-color:#d0e4fe;
}

</style>
</head>

<body>

<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;">
    <a href="">AAABBBCCC,xxx SSS新闻</a>
</div>

</body>
</html>

效果如下；span 是一个行级元素；

如果把span换成a，如下；<a>也是行级元素；

首要的是外部的div要设置text-align:center;本例如果外部div去掉line-height属性后效果如下；

然后看一下块级元素在div中水平居中；div是块级元素；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div demo </title>
<style>
body {
	background-color:#d0e4fe;
}

</style>
</head>

<body>

<div style="width: 500px;height: 100px;border: 3px solid red;">
    <div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 3px solid gold">
        内部元素
    </div>
</div>

</body>
</html>

div在div中水平居中；