Reputation: 449

Center Everything

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

Upvotes: 1

Answers (5)

Redheadinferno

Reputation: 141

Just put centre tags around your code, better be best way to do it but it works

Your code between centre tags

Upvotes: 0

Gildas.Tambo

Reputation: 22643

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

enter image description here

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

enter image description here

For your website add this

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

Upvotes: 2

STP38

Reputation: 331

Put everything in one div, give the div margin: auto; in the css

Like this:

div .everything {
      margin: auto;
      width: 1000px; /*You need to give a width, this can be 99% or 
something like this i.e. If you don't do this it won't work. */
}

Upvotes: 0