CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 3589

How do I center elements on a page using percentage widths?

I'm creating a webpage with a horizontal parallax effect. I set my page width to 400% so that I could have 4 pages and thus it'll respond to different browser widths. However, how would I center elements within each page sections(i.e. how to center elements on sections 0-100%, 101-200%, etc.) I've tried setting a specified width and then using margin: 0 auto, but to no avail. Any ideas?

HTML: 

<div id="transition-slide-container">   <!--begin transition-slide-container-->         
            <div id="transition-slide">
                <div class="slide" id="home">
                    <div id="inner-container">
                        <h1>home</h1>                       
                    </div>
                </div>
                <div class="slide" id="portfolio">
                    <div id="inner-container">
                        <h1>portfolio</h1>
                    </div>
                </div>
                <div class="slide" id="about">
                    <div id="inner-container">
                        <p>about</p>
                    </div>
                </div>                  
                <div class="slide" id="contact">
                    <div id="inner-container">
                        <h1>Contact</h1>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    width: 400%;    
    z-index: -1;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
    left: 0;
}
.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
    border-left: 1px #000 solid;
}
div#inner-container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
}

Website: andrewgu12.kodingen.com Edit: Here's a jsfiddle: http://jsfiddle.net/6Gtaf/ Thanks!

Upvotes: 0

Views: 233

Answers (3)

Brigand
Brigand

Reputation: 86270

fiddle & full-screen preview

You should either specify min-width: 400% instead of width, or set max-width: 960px on .silde. Otherwise, 4 slides won't fit in smaller than a 960px wide viewport, e.g. every phone (try scrolling to the right on the @sourcecode's fiddle).

The position: absolute is pointless and not good, unless .slide is positioned relative, and coordinates are set, but there's no need to do that.

Also, borders are in addition to the size of the element. You must either change the box model, via box-sizing: border-box, set your width to slightly less than 25%, or have 1px extra on the sides.

text-align center will not* center block-level elements. By default, they span 100% of the width of their parent, and the text inside them is centered. In the demo, I created one div that's 30x30 pixels. Another has the same style, but also margin: 0 auto;.

Setting the container to have a min-height: 100% allows it to grow as needed, doesn't force a scrollbar if it's not needed, and makes sure it takes up at least the entire screen vertically.

Upvotes: 0

Shanosha
Shanosha

Reputation: 106

You need to add text-align:center to the slide class.

.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
    border-left: 1px #000 solid;
    text-align:center;
}

Here's an updated version of your fiddle.

Also, I noticed you repeat "inner-container" as an id in each slide. You probably should change that to a class since there are multiple instances of it in the same HTML page.

Upvotes: 1

sourcecode
sourcecode

Reputation: 1802

if you want to center align text in div-container then use:

text-align:center; in your css , here is the demo :jfiddle demo

Upvotes: 0

Related Questions