如何使用HTML和CSS实现div下边框居中显示？-css教程-PHP中文网

如何使用HTML和CSS实现div下边框居中显示？

DDD

发布： 2025-02-25 09:14:01

原创

856人浏览过

如何使用html和css实现div下边框居中显示？

巧妙运用CSS实现div下边框居中

本文将演示如何使用HTML和CSS，精确控制div元素下边框的长度和位置，使其完美居中。

以下代码示例展示了如何创建并居中一个div元素的下边框：

<code class="html"><!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 class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2140">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680088878918.png" alt="芦笋演示">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2140">芦笋演示</a>
                            <p>一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="芦笋演示">
                                <span>34</span>
                            </div>
                        </div>
                        <a href="/ai/2140" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="芦笋演示">
                        </a>
                    </div>
                
</div>

</body>
</html></code>

登录后复制

在这个例子中，我们通过伪元素 ::after 创建了一个下边框。position: absolute; 使其相对于父元素 #myDiv 进行定位；bottom: 0; 将其放置在div底部；left: 50%; 和 transform: translateX(-50%); 组合使用，实现了水平居中；width 和 height 属性控制边框的尺寸；background-color 设置边框颜色。

最终效果：一个红色，长度为100px，高度为3px的下边框，精确地位于div元素的底部中央。

[图片] (此处应插入最终效果图，与原文图片相同)

以上就是如何使用HTML和CSS实现div下边框居中显示？的详细内容，更多请关注php中文网其它相关文章！