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

Was it helpful?

Solution

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*/
}

OTHER TIPS

margin:0 auto wont work unless the parent container has text-align:center; set, try adding the below to your CSS:

body{
    text-align:center;
}

In addition, centered content will either need to have a set width, or be set to display:inline-block;

div.barra2
{
text-align:center
}

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. */
}

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

Your code between centre tags

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top