0

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>
4

4 回答 4

1

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.

于 2013-03-17T03:57:37.940 回答
0

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

于 2013-03-17T03:57:46.447 回答
0

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

于 2013-03-17T04:03:05.863 回答
0

尝试这个

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;
}

在这里生活小提琴

于 2013-03-17T04:08:16.047 回答