gpt4 book ai didi

javascript - 如何对齐div边框内的文本标题

转载 作者:行者123 更新时间:2023-11-28 00:05:16 26 4
gpt4 key购买 nike

我试图将文本放在页面上框的边框内。我的解决方案有点管用,但框中的文本覆盖了标题,并没有按照我希望的方式缩放。有更好的解决方案吗?

我试过一些这样的东西 https://jsbin.com/atupup/edit?html,output但到目前为止还没有成功。

这是我登陆的代码:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: white; padding: 0 10px;">
Section Title <!--Padding is optional-->
</span>
</div>
<div style="border: 1px solid black; padding:none;">
<p>more content here</p>
</div>

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: white; padding: 0 10px;">

Section Title <!--Padding is optional-->
</span>
</div>
<div style="border: 1px solid black; padding:none;">
<p>more content here</p>
</div>

我不确定我这样做是否正确,如有任何帮助,我们将不胜感激!

最佳答案

使用 <fieldset><legend> ,它本身就提供了这种效果,并且可以按照您喜欢的方式设置样式:

fieldset {
background-color:rgba(100,50,175,.2);
border-top:3px solid black;
}

legend {
text-align:center;
font-size:3em;
font-weight:bold;
background-color:rgba(100,100,255,.5);
padding:10px;
border:3px dashed #e0e0e0;
}
<fieldset>
<legend>This is the title</legend>

Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here Other content here

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

<p>Just about any HTML can go in here</p>
</fieldset>

关于javascript - 如何对齐div边框内的文本标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55736617/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com