html - 行分隔符,但带有 float text-left

标签 html css

<分区>


关闭 6 年前

我发现很多解决方案如何使行分隔符与文本居中对齐。但我需要左对齐文本。我尝试了所有解决方案,但没有成功。 我试试这段代码

 <body>
<h1>ODABERITE PAKET</h1>

在CSS中

h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 15px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -0%;
}

但这并没有像我预期的那样工作。文本在下面一行。谢谢

编辑: @Aaron Mahlke 的答案是解决方案

最佳答案

我想这样的事情会有帮助吗?

.sep{
  width: 100%;
  display: flex;
  color: #333;
  align-items: center;
  flex: 1;
}

.sep:before{
  content: '';
  height: 1px;
  background: #333;
  max-width: 100px;
  margin-right: 10px;
  flex: 1;
}

.sep:after{
  content: '';
  height: 1px;
  background: #333;
  flex: 1;
  margin-left: 10px;
}
<div class="sep">
  <p>Text</p>
</div>

关于html - 行分隔符,但带有 float text-left,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39870371/

上一篇:javascript - 如何检测 mouseenter 或 mouseleave

下一篇:html - Bootstrap 在一行中为多个单词着色?

相关文章:

html - CSS:菜单隐藏在其他父菜单后面

html - 元素底部边框上的三 Angular 形

html - 有没有办法在没有 CSS Flex 的情况下从上到下或从左到右显示 HTML 列表?

javascript - 如何使用 jQuery 从 HTML 中的隐藏字段获取文本

html - 在表格中,TD 标签宽度在 HTML 中没有正确对齐?

html - 修复边框底部菜单

javascript - 从 HTMLCollection 获取数组的 div

javascript - HTML5 <audio> 中区分音频开始和音频播放(暂停后)

javascript - CSS 和 JQuery : spaces inside image name break code of url()

html - 与使用类相比,我如何衡量内联 css 的效率