巧妙运用CSS实现div下边框居中
本文将演示如何使用HTML和CSS，精确控制div元素下边框的长度和位置，使其完美居中。
以下代码示例展示了如何创建并居中一个div元素的下边框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div下边框居中</title>
<style>
#myDiv {
width: 200px; /* 设置div宽度 */
position: relative; /* 使用相对定位 */
}
#myDiv::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* 水平居中 */
width: 100px; /* 设置边框长度 */
height: 3px; /* 设置边框高度 */
background-color: red; /* 设置边框颜色 */
}
</style>
</head>
<body>
<div id="myDiv">
<p>这是一个div元素。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</body>
</html>在这个例子中，我们通过伪元素 ::after 创建了一个下边框。position: absolute; 使其相对于父元素 #myDiv 进行定位；bottom: 0; 将其放置在div底部；left: 50%; 和 transform: translateX(-50%); 组合使用，实现了水平居中；width 和 height 属性控制边框的尺寸；background-color 设置边框颜色。
最终效果：一个红色，长度为100px，高度为3px的下边框，精确地位于div元素的底部中央。
[图片] (此处应插入最终效果图，与原文图片相同)
以上就是如何使用HTML和CSS实现div下边框居中显示？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
232
