css中怎么样将文字放在一条横线中间

如果是将一条横线贯穿那个文字的话，就好比删除线那样的效果具体代码如下：

<style type="text/css">

p{text-decoration:line-through;}

</style>

<p>test</p>

如果是文字在中间，文字两边有横线的话，实现方法如下：

html代码如下：

<div class="yuanweihua">
<div class="yuanweihua-middle-line">
<span class="yuanweihua-line-text">鸢尾花序列</span>
</div>
</div>

css代码如下：

.yuanweihua{

 margin: 50px;

 text-align: center;

 background-color: #fff;

 }

 .yuanweihua-middle-line:before{

 content: '';

 display: block;

 height: 1px;

 width: 100%;

 background-color: #999;/*颜色需与主题大背景色一致，不然就露陷了*/

 position: relative;

 top: 10px;/*这个是用来调节线高*/

 left: 0;

 }

 .yuanweihua-line-text{

 display: inline-block;

 background: #fff;

 padding: 0 18px 0 18px;

 position: relative;

 font-size: 14px;

 font-weight: 500;

 }
效果如下：

未经允许不得转载：哈勃私语 » css中怎么样将文字放在一条横线中间

本文共643个字创建时间：2017年5月23日11:43

相关推荐