center button and glyphicon on different lines

Question

As part of a small jQuery project, I'm trying to have a Bootstrap glyphicon and button centered and with a line break between them. Right now the glyphicon stays centered, but the button shifts a bit left/right depending on the container's size (at its smallest, it appears off to the left).

How can I make both elements be centered on different lines within their parent <p>?

The html below shows two glyphicons, but I'm using jquery to unhide one of them upon clicking the correct button.

@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. Remove the pull-right class from your hidden button. This class adds the float: right; property. If I understand correctly, this is not appropriate for your task.
2. There is a problem that a free space arises between <span> elements. You can find several solutions in this question. But I suggest turning these <span>s into blocks. You can remove the <br> tag, add the center-block class to both icons and a button and define some top margin for the button. After that, you can remove the parent <p> block, if you want.

I also deleted the hide class from the first icon and the button to make the result visible:

@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

You can keep the glyphicons centered by setting relative position to parent element, the paragraph with "text-center" class in this case. The glyphicons are centered then. Hope this helps and answers your question.

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