ブートストラップパネル：同じ行にあるテキストとプラス記号

Question

私はパネルを持っています。その中には、左側にテキストがあり、右側に+のシンボルがあります。フォントサイズを+のように増やしたい場合は、パネルの見出しに余分な高さがあります。

左側のテキストのフォントサイズを増やしたくありません。 +シンボルは左側のテキストよりも大きいことがあります。

.add_discount_plus_minus { 
 
    font-size: 12px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
    <div class="panel-heading text-left "> 
 
    <div class="row "> 
 
     <div class="col-lg-10 col-md-10 col-sm-10"> 
 
     <span>Add Discount</span> 
 
     </div> 
 

 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
 
     <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

すべてのヘルプは素晴らしいことです。

ありがとうございます。

Answer 1

これはシンボル、絶対位置、垂直位置合わせする方法であるCSSの行の高さを使用して、任意のサイズでコンテナの高さと、変換：

position: absolute; 
top: 50%; 
transform: translateY(-50%); 

.add_discount_plus_minus { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 15px; 
 
    transform: translateY(-50%); 
 
    font-size: 12px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow"> 
 
    <div class="panel-heading text-left"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <span>Add Discount</span> 
 
     <span class="cursor_pointer add_discount_plus_minus">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ちょうど

.add_discount_plus_minus{ 
 
    font-size:30px; 
 
    line-height:20px; 
 
} 
 
#discount{ 
 
    line-height:50px 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
<div class="panel-heading text-left "> 
 
        <div class="row "> 
 
         <div class="col-lg-10 col-md-10 col-sm-10"> 
 
          <span id="discount">Add Discount</span> 
 
         </div> 
 

 
         <div class="col-lg-2 col-md-2 col-sm-2"> 
 
          <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
</div>

Answer 3

は、私は、これはあなたの問題を解決ではありませんが、正直私には正常に見える男を知っているypurクラス

.add_discount_plus_minus { 
    font-size: 18px; 
    margin-top: -24px; 
    font-weight: 600; 
} 

.add_discount_plus_minus { 
 
    font-size: 18px; 
 
    margin-top: -24px; 
 
    font-weight: 600; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="panel panel-default set_margin_0 set_padding_0 no_box_shadow" > 
 
    <div class="panel-heading text-left "> 
 
    <div class="row "> 
 
     <div class="col-lg-10 col-md-10 col-sm-10"> 
 
     <span>Add Discount</span> 
 
     </div> 
 

 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
 
     <span class="pull-right cursor_pointer add_discount_plus_minus ">+</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>