Question

我正在尝试在页面上的框内放置文本。我有种解决方案，但是方框中的文字覆盖了标题，并没有按我希望的方式缩放。有更好的解决方案吗？

我已经尝试了一些类似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>

我不确定我是否做得正确，因此将不胜感激！

Answer 1

将<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>

如何在div边界内对齐文本标题

1 个答案: