1

I have a div with width: 400px and height: 300px Inside the div I will insert some Text which should be aligned horizontaly and verticaly.

if the text inside the div is bigger than the div, it should show the scrollbars. Here is a picture which shows what i mean:

center

Pointy
  • 405,095
  • 59
  • 585
  • 614
MilMike
  • 12,571
  • 15
  • 65
  • 82

2 Answers2

1

The following works in webkit & geko & IE8 upwards. Try some of these techniques for vertical centering if you need legacy IE compatibility: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ OR Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

<div style="height:300px; overflow-y:auto; border:solid 1px #CCC;  width:400px;">
    <div style="display:table-cell; vertical-align:middle; height:300px; text-align:center; width:400px;">
        test
    </div>
</div>
Community
  • 1
  • 1
cronoklee
  • 6,482
  • 9
  • 52
  • 80
  • 1
    Fiddle: http://jsfiddle.net/j8vLw/ Another vertical centering technique is at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – biziclop Nov 06 '11 at 19:50
0

you might want to use on div as a container and then put your text in another div you might also want to check out jscrollpane 

div.container {
overflow: auto;
text-align: center;
}



<div class="container">
<p align="center">
<h2>Heading 1</h1>
<h2>Heading 2</h2>
</p>
</div>

Also try to set a fixed height for your container so you can get the scroll bars

    div.container {
max-height: 200px
}

The post by cronoklee works good too u might want to combine the two methods to get exactly what you want

Nick Delfico
  • 25
  • 6