CODEWITHSUNDEEP
htmlcss
Asim Roy
Asim Roy

Reputation: 10226

keep any div in horizontally middle

I have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.

Here is the code I have tried... Fiddle

<div id="wrapper1">
     <div id="one">1</div>
     <div id="two">2</div>
</div>

CSS from here...

#wrapper1 {
    width: 100%;
    height: 90px;
    margin: 0 auto;
}

#wrapper1 #one {
    width: 200px;
    height: 90px;
    background: white;
    display: inline-block;
    box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
    width: 100px;
    height: 90px;
    margin-left: 10px;
    background: white;
    display: inline-block;
    box-shadow: 0 0 5px #AAAAAA;
}


@media screen and (max-width: 400px) {

    #wrapper1 #two {
        display: none;
    }

}

Upvotes: 0

Views: 51

Answers (2)

4dgaurav
4dgaurav

Reputation: 11496

Demo

text-align:center into your parent div will make all the child div's will come in the center.

css

#wrapper1 {
    width: 100%;
    height: 90px;
    text-align: center; /* add just this to make child elements center in parent div */
}

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

just add the mentioned below css :- 

#wrapper1 {
    display: table;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....

DEMO

Upvotes: 0

Related Questions