Question

我找到了许多解决方案如何在中心使用text-align制作行分隔符。但是我需要将文本对齐。我尝试了所有解决方案，但没有成功。我尝试使用此代码

 <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%;
}

但这不像我期望的那样工作。文字在下面。日Thnx

编辑： @Aaron Mahlke回答是解决方案

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<div class="sep">
  <p>Text</p>
</div>

＆＃13;

Answer 2

我完全没有动摇你的问题，但是第一次你可以使用

textalign-left; direction:ltr;

我不回答你？

Answer 3

尝试一次

＆＃13;

.dot{
  float:left;
  width:100px;
  height:1px;
  border-top:1px dashed;
  margin-top:11px;
  
}
.txt{
float:left;
  margin:0px 5px;
}
.main{
width:250px;
  border:1px solid;
  height:20px;
}

＆＃13;

<div class="main">
<div class="dot"></div><span class="txt">Text</span><div class="dot"></div>
  <div>

＆＃13;

行分隔符，但浮动文本左

3 个答案: