異なる行の中央ボタンとグリフコン

Question

小さなjQueryプロジェクトの一部として、私はBootstrap glyphiconとボタンを中央に配置し、それらの間に改行を入れようとしています。現在、グリフコンは中央にとどまっていますが、ボタンはコンテナのサイズに応じて少し左/右にシフトします（最小の場合は左に表示されます）。

どのようにして、両方の要素を親の異なる線の中央に配置することができますか<p>？

以下のhtmlは2つのグリフコンを示していますが、jqueryを使用して正しいボタンをクリックするとその1つを再表示しています。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
#questionmark { 
 
    font-size: 15px; 
 
    color: purple; 
 
    border-bottom: 2px solid purple; 
 
    padding: 0 10px 2px 10px; 
 
} 
 

 
.btn { 
 
    font-family: Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 
p { 
 
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; 
 
} 
 

 
.valign{ 
 
    line-height:46px; 
 
    vertical-align:middle; 
 
} 
 

 
.glyphicon-ok-sign { 
 
    font-size: 40px; 
 
    color: green; 
 
} 
 

 
.glyphicon-warning-sign { 
 
    font-size: 40px; 
 
    color: red; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
#display-sentence { 
 
    display: none; 
 
} 
 

 
.highlight { 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <h1 class="text-center text-primary">¿POR O PARA?</h1> 
 
    <br> 
 
    <div class="jumbotron"> 
 
     <br> 
 
     <p><span id="test-sentence"></span></p> 
 
    </div> 
 
    <div class="col-xs-10 col-xs-offset-1"> 
 
     <div class="row"> 
 
      <div class="col-xs-4"> 
 
       <button type="button" class="btn test-btn btn-primary btn-lg" id="por-btn">por</button> 
 
      </div> 
 
      <div class="col-xs-4 text-center valign"> 
 
       <p class="text-center"> 
 
        <!-- I'm trying to center the following, only one glyphicon will be desplayed at a time, along with the #reload-btn --> 
 
        <span class="glyphicon glyphicon-ok-sign hide"></span> 
 
        <span class="glyphicon glyphicon-warning-sign hide"></span> 
 
        <br> 
 
        <button type="button" class="btn btn-success pull-right btn-lg hide" id="reload-btn">¡OTRA!</button> 
 
       </p> 
 
      </div> 
 
      <div class="col-xs-4"> 
 
       <button type="button" class="btn test-btn btn-primary pull-right btn-lg" id="para-btn">para</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

1. あなたの隠されたボタンからpull-rightクラスを削除します。このクラスadds the float: right; property。私が正しく理解していれば、これはあなたの仕事には適していません。
2. <span>要素の間に空き領域が発生するという問題があります。いくつかの解答in this questionがあります。しかし、これらのブロックをブロックにすることをお勧めします。 <br>タグを削除し、アイコンとボタンの両方にthe center-block classを追加して、ボタンの上端を定義します。その後、必要に応じて親ブロック<p>を削除することができます。

Iはまた、結果を可視化するために、第1のアイコン及びボタンからhideクラスを削除：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
#reload-btn { 
 
    margin-top: 10px; 
 
} 
 

 
#questionmark { 
 
    font-size: 15px; 
 
    color: purple; 
 
    border-bottom: 2px solid purple; 
 
    padding: 0 10px 2px 10px; 
 
} 
 

 
.btn { 
 
    font-family: Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 
p { 
 
    font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; 
 
} 
 

 
.valign{ 
 
line-height:46px; 
 
vertical-align:middle;} 
 

 
.glyphicon-ok-sign { 
 
    font-size: 40px; 
 
    color: green; 
 
} 
 

 
.glyphicon-warning-sign { 
 
    font-size: 40px; 
 
    color: red; 
 
} 
 

 
.hide { 
 
    display: none; 
 
} 
 

 
#display-sentence { 
 
    display: none; 
 
} 
 

 
.highlight { 
 
    background-color: yellow; 
 
}

<div class="container"> 
 
    <h1 class="text-center text-primary">¿POR O PARA?</h1> 
 
    <br> 
 
    <div class="jumbotron"> 
 
    <br> 
 
    <p><span id="test-sentence"></span></p> 
 
    </div> 
 

 
    <div class="col-xs-10 col-xs-offset-1"> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <button type="button" class="btn test-btn btn-primary btn-lg" id="por-btn">por</button> 
 
     </div> 
 

 
     <div class="col-xs-4 text-center valign"> 
 

 
      <!-- I'm trying to center the following, only one glyphicon will be desplayed at a time, along with the #reload-btn --> 
 
      <span class="glyphicon glyphicon-ok-sign center-block"></span> 
 
      <span class="glyphicon glyphicon-warning-sign hide center-block"></span> 
 
      <button type="button" class="btn btn-success btn-lg center-block" id="reload-btn">¡OTRA!</button> 
 

 
     </div> 
 

 
     <div class="col-xs-4"> 
 
     <button type="button" class="btn test-btn btn-primary pull-right btn-lg" id="para-btn">para</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたは、この場合の「テキスト・センター」クラスを持つ段落を親要素に相対的な位置を設定することにより、中心glyphiconsを保つことができます。グリフコンは、次に中央に配置されます。これが役立ち、あなたの質問に答えることを願っています。

.glyphicon-ok-sign { 
    position: absolute; 
    font-size: 40px; 
    color: green; 
} 

.glyphicon-warning-sign { 
    position: absolute; 
    font-size: 40px; 
    color: red; 
} 

p.text-center { 
    position: relative; 
}