CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
kittu
kittu

Reputation: 7008

How to center a div inside a row

I have a row with width of 1172px inherited from its parent. I have declared a div inside the row and I want to center align it. I tried applying margin: 0 auto and text-align:center which didn't work. How do I center it?

<div class="row">
    <div id="YelloBox" class="YelloBox"> 
    </div>                    
</div>

css:

.YelloBox {
    width: 515px;
    height: 602px;
    opacity: 0.3;
    background-color: #ffffff;
    background-color: var(--white);
    border: solid 1px #a28c77;
    border: solid 1px var(--reddish-grey);
    text-align: center;
    margin: 0 auto;
}

Upvotes: 2

Views: 5414

Answers (3)

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

Just use center-block class.

<div class="row">
    <div id="YelloBox" class="YelloBox center-block"></div>
</div>

See details in here.

Upvotes: 1

Dinca Adrian
Dinca Adrian

Reputation: 1230

http://www.w3schools.com/css/css_align.asp

i think this is all you need to fully understand aligns. Take a good look and play with the demos cause they have pretty good and interactive ones.

http://www.w3schools.com/cssref/css3_pr_flex.asp

Flex can also do same thing, but read the support page for a property because it might fail on some browsers.

http://caniuse.com/#search=flex

Upvotes: 0

Prasath V
Prasath V

Reputation: 1356

Just add display:table in css

.YelloBox {
    width: 515px;
    height: 602px;
    opacity: 0.3;
    background-color: #ffffff;
    background-color: var(--white);
    border: solid 1px #a28c77;
    border: solid 1px var(--reddish-grey);
    text-align: center;
    margin: 0 auto;
    display: table;
}

Upvotes: 2

Related Questions