Allineamento h2 e button

rbnz

Allineamento h2 e button

Ciao a tutti,
Sto creando un layout HTML e CSS con Bootstrap, ma ho un problema all'apparenza stupido che non riesco a risolvere.

In una row, che ha uno sfondo, sono contenuti un <h2> ed un <button>, che vorrei allineare uno a fianco all'altro, gli ho dato quindi un float left, così facendo però si posizionano sulla sinistra del div container in cui sono.
Ho poi provato ad inserirli in un altro div a cui ho dato un margin auto, per centrarli, ma questo div mi occupa tutto lo spazio del div contenitore, ossia del container, quindi devo per forza dargli una grandezza limite fissa per far in modo che sia centrato.
Io vorrei che il <div> che contiene l'h1 ed il button, si adatti automaticamente alla grandezza di questi due elementi, senza dovergli dare una grandezza specifica.
Vi posto qui il codice.

HTML:
[HTML]
<div class="row section cta clearfix">
<div class="container">
<div id="cta">
<h2>Sfoglia il Volantino e Scopri le Offerte!</h2>
<button type="button" class="btn btn-primary">Clicca Qui</button>
</div>
</div>
<div class="bottom-shadow"></div>
</div>[/HTML]

CSS:
[HTML]
.cta {
background: #f0f0f0 url("../src/images/bottom-shadow.png") no-repeat center top;
}

#cta {
margin: 2% auto 2% auto; width: 60%; overflow: hidden;
}

.cta h2 {
font-size: 30px;
font-weight: 100;
font-style: italic;
float: left;
margin: auto 2% auto auto;
}

.cta button {
width: 180px;
float: left;
}
.cta > .bottom-shadow {
margin-top: 2px;
}
[/HTML]

gigi991

Invece dei float, prova con inline: w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline
Così si affiancano, non vanno a sinistra e non hai bisogno del div centrato.

rbnz

@Gigi991 said:

Invece dei float, prova con inline: w3schools.com/cssref/playit.asp?filename=playcss_display&preval=inline
Così si affiancano, non vanno a sinistra e non hai bisogno del div centrato.

Già provato, va tutto comunque a sinistra, l unico modo valido che ho trovato per ora è stato quello che vedi nel codice, cioè dare al <div> contenitore una dimensione, cosa che però volevo evitare..

samuelenet

Se ho inteso bene quello che vuoi ottenere c'è il sistema di griglie di bootstrap come ad es.

[HTML]<div class="row">
<div class="col-md-6"><h2>Sfoglia il Volantino e Scopri le Offerte!</h2></div>
<div class="col-md-6"><button type="button" class="btn btn-primary">Clicca Qui</button></div>
</div>[/HTML]

rbnz

@samuelenet said:

Se ho inteso bene quello che vuoi ottenere c'è il sistema di griglie di bootstrap come ad es.

[HTML]<div class="row">
<div class="col-md-6"><h2>Sfoglia il Volantino e Scopri le Offerte!</h2></div>
<div class="col-md-6"><button type="button" class="btn btn-primary">Clicca Qui</button></div>
</div>[/HTML]

Grazie Samuel, ma anche così non è tutto centrato.. Vorrei che sia l'h2 che il button siano centrati uno a fianco all'altro con un margine tra i due di 20px.

gigi991

Fai un div width 100%, all'interno due div width 50%.
Dentro i due div i tuoi elementi, nel primo l'h2 allineato a destra (float) con margine destro 10px, nel secondo lo span allineato a sinistra (float) con margine sinistro 10px.

Oppure: allinea al centro lo span (o se va a 100% usa text-align) e metti l'h2 dentro lo span.

samuelenet

Allora io farei

[HTML]<div class="row">
<div class="col-md-12 text-center"><ul class="list-inline"><li><h2>Sfoglia il Volantino e Scopri le Offerte!</h2></li><li style="margin-left:20px"><button type="button" class="btn btn-primary">Clicca Qui</button></li></ul></div>
</div>[/HTML]