Allineamento del centro blocco in linea

Question

Quale sarebbe il modo più semplice per centrare allineare un elemento di blocco in linea?

Idealmente, non voglio impostare una larghezza per gli elementi. In questo modo, a seconda del testo immesso all'interno degli elementi, l'elemento inline-block si espanderà nella nuova larghezza senza dover modificare la larghezza all'interno del CSS. Gli elementi di blocco in linea dovrebbero essere centrati l'uno sull'altro (non affiancati), così come il testo all'interno dell'elemento.

Vedere il codice di seguito o vedere su jsFiddle.

La corrente HTML:

<div> 
    <h2>Hello, John Doe.</h2> 
    <h2>Welcome and have a wonderful day.</h2> 
</div> 

Lo SCSS attuale:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600); 

body { 
    margin: 0 auto; 
    background: rgba(51,51,51,1); 
    font-family: 'Open Sans', sans-serif; 
} 

div { 
    width: 100%; 
    height: auto; 
    margin: 15% 0; 
    text-align: center; 
    h2 { 
     margin: 0 auto; 
     padding: 10px; 
     text-align: center; 
     float: left; 
     clear: left; 
     display: inline-block; 
     &:first-child { 
      color: black; 
      background: rgba(255,255,255,1); 
     } 
     &:last-child { 
      color: white; 
      background: rgba(117,80,161,1); 
     } 
    } 
} 

Aggiunta di un br tra i due elementi e togliere il float: sinistra/chiaro: sinistra può essere il modo più semplice; tuttavia, ero curioso di sapere se c'era un altro modo per farlo.

Answer 1

Ti piace questo? http://jsfiddle.net/bcL023ko/3/ Rimuovere lo float:left a sinistra e aggiungere margin: 0 auto per centrare l'elemento. O è qualcos'altro che stai cercando?