CODEWITHSUNDEEP
htmlcss
user2094719
user2094719

Reputation: 29

I am having problems centering a scroll div

I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.

CSS

#content  
{
text-align: center;
}

.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}

HTML

<div id ="content">
<div class="scroll"> Stuff </div>
</div>

Upvotes: 0

Views: 325

Answers (4)

Mostafa Shahverdy
Mostafa Shahverdy

Reputation: 2725

You can add display:inline;margin:auto to your <div>.

Upvotes: 0

IT ppl
IT ppl

Reputation: 2647

try this

HTML

<div id ="content">
<div class="scroll"> Stuff </div>
</div>

CSS

#content  
{
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    height:200px;
    overflow: scroll;
}

.scroll
{
    background-color:#fff;
    color:#000;
    width:500px;
    height:400px;
}

live fiddle here

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.

Upvotes: 0

Leeish
Leeish

Reputation: 5213

A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.

Upvotes: 1

Related Questions