Center Everything

Question

I am making this project in which I want all the content to me centered in the middle of the page, I can't seem to make margin: 0px auto; work, can anyone help me out?

(example code:)

<div class="barra2">
    <img src="barra2/botao_series_rotax.png">
    <img src="barra2/botao_trofeu_rotax.png">
    <img src="barra2/bot_inscricpion.jpg"> 
    <img src="barra2/bot_class_online.jpg" >
    <img src="barra2/resultados_.png">
</div>

(getting that centered)

Here is the fiddle of the whole thing

Fiddle

Answer 1

if your only want to center the images

<div class="barra2">
    <img src="barra2/botao_series_rotax.png">
    <img src="barra2/botao_trofeu_rotax.png">
    <img src="barra2/bot_inscricpion.jpg"> 
    <img src="barra2/bot_class_online.jpg" >
    <img src="barra2/resultados_.png">
</div>

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:block;
    clear:both;
    margin:10px auto;
 }

JSFIDDLE DEMO

Update:

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:inline-block;
 }

JSFIDDLE DEMO INLINE

wenn you add width to your image you have it like this

.barra2{
    text-align:center;
    width:100%;
}

 .barra2 img{
    display:inline-block;
    width:140px;
 }

DEMO INLINE-BLOCK 2

For your website add this

.barra2 {
text-align: center;
width: 100%;
clear: both;/*this will solve the problem*/
}