ansaurus

Question

Answer 1

A:

You can horizontally center a div with:

/*CSS*/
#divtocenter {
    width: 400px;
    margin: 0 auto; /*that's it*/
}

fabrik 2010-07-21 09:41:03

a div that fits into the screen yes, but not a `large (overflow-hidden)` div...

galambalazs 2010-07-21 09:45:22

i don't understand you. i can set overflow: hidden; in this div too

fabrik 2010-07-21 10:20:36

I'm looking to horizontally center the contents of a 100% width DIV (even if the contents are 5000px wide).For example, assuming the below is a super-wide UL, li '3' would be centered to my screen (as it's the center item), and anything left or right would disappear from my view (overflow hidden).| 1 | 2 | 3 | 4 | 5 |

Buzz 2010-07-21 10:25:32

Is this a plugin?

fabrik 2010-07-21 10:39:13

Answer 2

A:

Ok Buzz, if i understand you need a way to center a div inside another 'overflow: hidden' div. I imagine you don't know in advance the width of the inner div. You sead you want to use JQuery than ou have to calculate the left margin of the inner div with something like this:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>item List</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript">
      <!--
        $(document).ready(function (){
            $('#div2').draggable();
            var halfScreen = $('#div2').parent().width()/2;
            var left = ($('#div2').width()/2)-halfScreen;
            $('#div2').css("left", (-left)+"px");
        });
      //-->
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 100%;
            height: 300px;
            margin: 80px 0;
            padding: 0;
            background: red;
            overflow: hidden;
        }
        #div2{
            width: 300%;
            height: 100px;
            margin: 100px 0;
            padding: 0;
            background: #ddd;
        }
        #div3{
            width: 50%;
            height: 100px;
            margin: 0;
            padding: 0;
            background: #aaa;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>

</html>

This is a very simple case, if you need more, please ask.

PS: you need JQuery and JQuery.UI.

s.susini 2010-07-21 13:00:39

Fantastic - exactly what I was looking for. I think I was trying to overcomplicate the issue, simple was the key :)

Buzz 2010-07-22 19:46:01

ansaurus

tags:

views:

answers:

Center DIV contents to viewport

related questions