Domanda

Come centrare orizzontalmente un pulsante Bootstrap 3 btn-toolbar all'interno di un div col-lg?

      <div class="col-lg-6 col-sm-3 noleftpad">
          <div class="well topnestedbut">   
              <div class="btn-toolbar nested-top">
                  <button type="button" class="btn btn-default btn-sm"><strong>This must be centered</strong></button>
              </div>
          </div>
      </div>
.

CSS:

.btn-toolbar.nested-top{
    position:absolute;
    top:0px;
    text-align:center;
}

.well.topnestedbut{
    padding:35px 10px 10px;
}

.noleftpad{
    padding-left:0px;
}
.

Voglio che il pulsante sia attaccato alla parte superiore del div del contenitore e anche centrato: Inserire l'immagine Descrizione qui

È stato utile?

Soluzione

Ecco cosa ho fatto:

Quando un elemento è posizionato assoluto è fluttuante sopra il contenuto.In questo stato occuperà solo la stanza come il contenuto all'interno di esso.

Se si imposta la larghezza del 100% su quell'elemento, occupererà il 100% della larghezza dei contenitori genitore (o relativa).

http://jsfiddle.net/per3m/3/

.btn-toolbar.nested-top{
    text-align:center;
    position:absolute;
        top:0;
    width:100%;
}
.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top