如何使中间行和文本之间的空间？ [英] How to make space between middle line and text?

问题描述

所以，我想做的是在中间行和中间文本之间留出空格。这是我的小提琴： https://jsfiddle.net/abqy4w1f/ 。所以我想让左右边距圆圈10px。任何建议？

  .outter-h2 {width：200px; text-align：center; border-bottom：1px solid #cccccc; line-height：0.1em; margin：35px auto 35px;}。outter-span {background：#fff; padding：0 10px; border：1px solid #cccccc; border-radius：50％; color：＃bec3c7;}  

 < h2 class = outter-h2>< span class =outter-span>？< / span>< / h2>   
解决方案
对于此特定示例，您可以执行此操作：
 
 
 
 
 
 
  .wrapper {display：inline-block;}。outter-h2 {float：left; width：100px; text-align：center; border-bottom：1px solid #cccccc; margin-top：4％;}。outter-span {float：left; background：#fff; padding：0 10px; border：1px solid #cccccc; border-radius：50％;颜色：＃bec3c7; margin：0 10px;}  
 
 < div class = wrapper>< div class =outter-h2>< / div>< span class =outter-span>？< / span>< div class =outter-h2> ;< / div>< / div>  
 
 
 
 
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?



.outter-h2 {
  width: 200px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  line-height: 0.1em;
  margin: 35px auto 35px;
}
.outter-span {
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
}

<h2 class="outter-h2"><span class="outter-span">?</span></h2>



解决方案
For this particular example you ca do this:



.wrapper{
  display: inline-block;
}
.outter-h2 {
  float: left;
  width: 100px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  margin-top: 4%;
}
.outter-span {
  float: left;
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
  margin: 0 10px;
}

<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>





                        
这篇关于如何使中间行和文本之间的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！