Jak wyśrodkować w jednej linii kilka divów?

pytanie zadane 10 lipca 2015 w HTML i CSS przez DL TD Nałogowiec (36,710 p.)
zamknięte 10 lipca 2015 przez DL TD

Mam mały problem. Obojętnie jak próbuję porodzić sobie z tym problemem, efekt jest zły :/

Chcę (tak jak w temacie) wyśrodkować w jednej linii kilka tych samych divów. Aktualnie wygląda to tak:

Chcę te "kółka" wyśrodkować i zostawić je w jednej linii poziomej. Kod zamieszczam na dole:

<style type="text/css">
	#BottomContent {
	width: 100%;
	}

	.user {
		float: left;
		margin: 0 auto;
		background-image: url(img/user.png);
		background-repeat: no-repeat;
		background-position: center;
		padding: 120px;
	}
</style>

<article id="BottomContent">
		<content>
			<div class="user">Adam Nowak</div>
			<div class="user">Jan Kowalski</div>
			<div class="user">Stefan Dąbrowski</div>
		</content>
</article>

Grafika do diva z classą user:

komentarz zamknięcia: Problem rozwiązany. Odpowiedź została oznaczona jako najlepsza.

1 odpowiedź

odpowiedź 10 lipca 2015 przez Comandeer Guru (601,450 p.)
wybrane 10 lipca 2015 przez DL TD

Najlepsza

Zamiast float użyj display: inline-block i text-align: center dla ich rodzica.

komentarz 10 lipca 2015 przez DL TD Nałogowiec (36,710 p.)

Dla ich rodzica czyli id="BottomContent"?

Gdy dodaję display: inline-block; text-align: center; do BottomBontent i usuwam float:left; z class="user" to divy ustawiają się pod sobą :/ a chcę w jednej linii.

komentarz 10 lipca 2015 przez Comandeer Guru (601,450 p.)

Chodziło mi o:

<style type="text/css">
    #BottomContent {
    width: 100%;
    text-align: center;
    }
 
    .user {
        display: inline-block;
        margin: 0 auto;
        background-image: url(img/user.png);
        background-repeat: no-repeat;
        background-position: center;
        padding: 120px;
    }
</style>

BTW skąd wytrzasłeś tag content? ;P