Vertically centering a div

Hi All,
I want to be able to have a full screen image with text overlaying it in the centre. I want the full screen image to respond to the size of the viewport. I have the following code which works for the opening screen image.
CSS:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 3vh;
text-align: left;
html, body, #a {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
#a {
    display: table;
background-color: #0CF;
#b {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
#content {
    border: 5px solid red;
    width: 90%;
    height: auto;
    margin: auto;
HTML:
<div id="a">
<div id="b">
    <div id="content">
      <h1>THIS IS MY HEADING</h1>
    </div>
</div>
</div>
I want to be able to replicate this down my page. I can simply copy and paste the Html and it works but it obviously runs off the same CSS. If i change the div id name and copy the CSS code and rename that, it stops working.
Any help would be great on this as I really need this to work for my design.
If you need me to elaborate more just let me know.
Cheers,
Alex

Is this the kind of solution you are looking for?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300,300italic,300|Droid+Ser if:400,400italic' rel='stylesheet' type='text/css'>
<style>
html {
    height:100%;
body {
    background: #fff;
    color: #878787;
    font-weight:300;
font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    text-align:left;
    height:100%;
    padding: 0;
    margin: 0;
.fullScreen {
width:100%;
height:100%;
display: table;
.fullScreen .fullScreenText {
display: table-cell;
text-align: center;
vertical-align: middle;
.fullScreen .fullScreenText p {
text-align:center;
.fullScreen h2 {
    font-size: 30px;
    color: #fff;
    text-align: center;
.fullScreen a {
text-decoration: none;
display: inline-block;
background-color:#C90;
color: #fff;
padding: 15px 25px;
font-weight: 600;
</style>
</head>
<body>
<div class="fullScreen" id="panel1" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2012/04/26/20/06/butterfly-43008_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the home page</h2>
<a href="#panel2" data-scroll data-speed="800" data-easing="easeInOutQuad">About Us</a>
</div>
</div>
<div class="fullScreen" id="panel2" style="background: #f2f2f2 url('http://pixabay.com/static/uploads/photo/2014/10/29/17/19/butterfly-508143_640.jpg') no-repeat scroll center right; -webkit-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div class="fullScreenText">
<h2>Some text goes here for the about page</h2>
<a href="#panel1" data-scroll data-speed="800" data-easing="easeInOutQuad">Home</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/* =============================================================
    Smooth Scroll 3.2
    Animate scrolling to anchor links, by Chris Ferdinandi.
    http://gomakethings.com
    Easing support contributed by Willem Liu.
    https://github.com/willemliu
    Easing functions forked from GaÃ«tan Renaudeau.
    https://gist.github.com/gre/1650294
    URL history support contributed by Robert Pate.
    https://github.com/robertpateii
    Fixed header support contributed by Arndt von Lucadou.
    https://github.com/a-v-l
    Infinite loop bugs in iOS and Chrome (when zoomed) by Alex Guzman.
    https://github.com/alexguzman
    Free to use under the MIT License.
    http://gomakethings.com/mit/
* ============================================================= */
window.smoothScroll = (function (window, document, undefined) {
    'use strict';
    // Feature Test
    if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
        // SELECTORS
        var scrollToggles = document.querySelectorAll('[data-scroll]');
        // METHODS
        // Run the smooth scroll animation
        var runSmoothScroll = function (anchor, duration, easing, url) {
            // SELECTORS
            var startLocation = window.pageYOffset;
            // Get the height of a fixed header if one exists
            var scrollHeader = document.querySelector('[data-scroll-header]');
            var headerHeight = scrollHeader === null ? 0 : scrollHeader.offsetHeight;
            // Set the animation variables to 0/undefined.
            var timeLapsed = 0;
            var percentage, position;
            // METHODS
            // Calculate the easing pattern
            var easingPattern = function (type, time) {
                if ( type == 'easeInQuad' ) return time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuad' ) return time * (2 - time); // decelerating to zero velocity
                if ( type == 'easeInOutQuad' ) return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInCubic' ) return time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutCubic' ) return (--time) * time * time + 1; // decelerating to zero velocity
                if ( type == 'easeInOutCubic' ) return time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuart' ) return time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuart' ) return 1 - (--time) * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuart' ) return time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
                if ( type == 'easeInQuint' ) return time * time * time * time * time; // accelerating from zero velocity
                if ( type == 'easeOutQuint' ) return 1 + (--time) * time * time * time * time; // decelerating to zero velocity
                if ( type == 'easeInOutQuint' ) return time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
                return time; // no easing, no acceleration
            // Update the URL
            var updateURL = function (url, anchor) {
                if ( url === 'true' && history.pushState ) {
                    history.pushState( {pos:anchor.id}, '', '#' + anchor.id );
            // Calculate how far to scroll
            var getEndLocation = function (anchor) {
                var location = 0;
                if (anchor.offsetParent) {
                    do {
                        location += anchor.offsetTop;
                        anchor = anchor.offsetParent;
                    } while (anchor);
                location = location - headerHeight;
                if ( location >= 0 ) {
                    return location;
                } else {
                    return 0;
            var endLocation = getEndLocation(anchor);
            var distance = endLocation - startLocation;
            // Stop the scrolling animation when the anchor is reached (or at the top/bottom of the page)
            var stopAnimation = function () {
                var currentLocation = window.pageYOffset;
                if ( position == endLocation || currentLocation == endLocation || ( (window.innerHeight + currentLocation) >= document.body.scrollHeight ) ) {
                    clearInterval(runAnimation);
            // Scroll the page by an increment, and check if it's time to stop
            var animateScroll = function () {
                timeLapsed += 16;
                percentage = ( timeLapsed / duration );
                percentage = ( percentage > 1 ) ? 1 : percentage;
                position = startLocation + ( distance * easingPattern(easing, percentage) );
                window.scrollTo( 0, position );
                stopAnimation();
            // EVENTS, LISTENERS, AND INITS
            updateURL(url, anchor);
            var runAnimation = setInterval(animateScroll, 16);
        // Check that anchor exists and run scroll animation
        var handleToggleClick = function (event) {
            // SELECTORS
            // Get anchor link and calculate distance from the top
            var dataID = this.getAttribute('href');
            var dataTarget = document.querySelector(dataID);
            var dataSpeed = this.getAttribute('data-speed');
            var dataEasing = this.getAttribute('data-easing');
            var dataURL = this.getAttribute('data-url');
            // EVENTS, LISTENERS, AND INITS
            event.preventDefault();
            if (dataTarget) {
                runSmoothScroll( dataTarget, dataSpeed || 500, dataEasing || 'easeInOutCubic', dataURL || 'false' );
        // EVENTS, LISTENERS, AND INITS
        // When a toggle is clicked, run the click handler
        Array.prototype.forEach.call(scrollToggles, function (toggle, index) {
            toggle.addEventListener('click', handleToggleClick, false);
        // Return to the top of the page when back button is clicked and no hash is set
        window.onpopstate = function (event) {
            if ( event.state === null && window.location.hash === '' ) {
                window.scrollTo( 0, 0 );
})(window, document);
</script>
</body>
</html>

Similar Messages

Why is vertical centering still such a challenge?

Is it really still this tricky to code DW to allow easy vertical centering? Just wondering. Tools for web design have been around long enough, and yet, simply vertically centering an image remains... elusive. Sure - if you know exactly how to do it, or remember it, or figure it out.... sometimes I can get it to work with relative ease; other times, not so much.
Really, though - no vertical center button anywhere? (I may have missed it.)
Now, I admit, I have some homework to do; in the mean time, though, is there any guide someone can recommend?
I'd like to both center divs vertically as well as center their content vertically, and not necessarily both at the same time... preferably using css.
thanks,
Andrew

as to why this is this case is presumably because as the width of an element shrinks, margins-top and position-top and height are contingent on that allowed width. But margin-top and margin-bottom by default are set to auto. This may make it seem like vertical alignments should occur naturally, but it does not. This is because behind the scenes auto is converted to 0. Meaning that Height auto is automatically set to 100% of its containers height leaving no room for margin-top or margin-bottom. Vertical formatting of block level normal flow elements, relies on a calculation much like horizontal formatting. margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom must equal its parenting elements height. However if you use absolutely positioned elements, then if all three of 'top', 'height', and 'bottom' are not auto: If both 'margin-top' and 'margin-bottom' are 'auto', solve for top+ margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom +bottom must equal its parenting elements height. Therefore, margin-top and margin-bottom will be equal values thus vertically centering the element.

Horizontally centering a div with "auto" margins...

I believe this is the first time I've ever encountered an instance where something works as intended in IE7, but won't in IE8+ or FF3.
I am trying to horizontally center a 995px fixed (non-scrolling) div that stretches to 100% vertically.
Here's the code I'm using :
.class {
    height:100%;
    width:995px;
    position:fixed;
    background:no-repeat left center;
    top:0; bottom:0;
    padding:0;
    margin:0 auto;
    overflow:hidden;
As I said, it works like a charm in IE7, but the entire div is left-justified in the viewport on anything more recent than that.
Can anyone spot anything wrong with my method?

Not sure what you're trying to accomplish, but you can't have it both ways.
Use either static (default) positioning and auto (default) margins or fixed positioning with coordinates for top or bottom & left or right. Older IE browsers don't support fixed positioning on anything except the body tag -- which may explain your results.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.center {
width:995px;
background:no-repeat left center;
padding:0;
margin:0 auto;
overflow:hidden;
border:1px solid silver;
text-align:center;
.fixed {
width: 250px;
position:fixed;
top:5em;
left:0;
text-align:center;
border: 4px solid green;
</style>
</head>
<body>
<div class="center">
this is a centered division
</div>
<div class="fixed">
this is a fixed division
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Vertical Centering of a page in GoLive

I need a help in vertical centering a page. After long trials and with the help of others in this forum I was able a website that is functioning well enough. The only concern is that it needs to be centered vertically. You can see the website on: http://www.chimeddorj.com
I read the tutorial on the following link, and I liked the 3rd method.
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
But it was too complicated for me as I don't use GoLive often enough. I made this website 3 months ago and since then I haven't used it again. As a result I kind of forgot a lot of things that I knew at that time. If you know how to make the Vertical Centering, could you please guide me how to place the codes in right places? I could provide you with necessary files if necessary. You can also see the HTML code sources by clicking the right button on the website that I created.
For some people it may be easy as click. Please help me if you can.

Thank you very much for comment. I tried to use the table method with your codes. It is centering the content horizontally, but not vertically. The contents are stuck to the top as I resize the window. It seems like I am missing some point. I copy and paste my current code. Could you please give me more advice?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Mongolian Artist Chimeddorj</title>
<script src="js/swfobject.js" type="text/javascript" ></script>
<style type="text/css" media="screen"></style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
<tr align="center" valign="middle">
<td align="center" valign="middle">
<div style="position:relative;width:1060px;height:540px;-adbe-g:p;">
<div style="position:absolute;top:0px;left:0px;width:700px;height:540px;-adbe-c:c">
<script type="text/javascript">
var flashvars = {XMLFile: "paintings.xml"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("ArtFlashGallery.swf", "myAlternativeContent","700", "540", "10.0.0",false, flashvars, params);
</script>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a></div>
<br />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

I need help Centering a div box to a background image using dreamweaver cs5.5.

I need help Centering a div box to a background image using dreamweaver cs5.5. Everything shift left when viewing on different size monitors? See what I mean at
www.woodlandhospice.com

Have you looked at your page with images disabled?
I urge you to re-think this approach to web design because images of text are not indexed by search engines, screen readers or translators. Given the demographic group your site is targeting, you really need to ensure maximum web accessibility for all users.
Navigation, headings and descriptions all need to be in real text -- not images of text.
Ken is right. Absolute positioning is pure poison for such a simple layout. My advice is to start over with one of the pre-built Starter Pages in DW. Go to File > New > Blank page > HTML. Select a layout from the 3rd column and hit CREATE button.
Nancy O.

Centering a Div Horizontally

Hello,
I need help centering a div horizontally with CSS. What I'm trying to do is get this box that will contain text to center on the page and then I will expand it's width to match the image right above it, to fit the design.
Here is my code (i made the code of the div that I want to center within the document bold):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Lorentz Painting Co.: Pristine, Precise and Professional" />
<meta name="keywords" content="Maciej Lorenz, paint, high quality, interior, exterior, co., painting, professional, New England, Vermont, Nassachussetts, Boston, New York New Hampshire, New England" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Nantucket Gift Basket Company</title>
<link href="stylesMain.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:1844px;
    height:43px;
    z-index:1;
    left: 64px;
    top: 253px;
body {
    background-color: #FFF;
    background-image: url(shingles1.jpg);
    background-repeat: repeat;
a:link {
    text-decoration: none;
    color: #FFF;
a:visited {
    text-decoration: none;
    color: #FFF;
a:hover {
    text-decoration: none;
    color: #FF0;
a:active {
    text-decoration: none;
    color: #FF0;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-5']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-6']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3119473-7']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body>
<div id="wrapper-1">
<div id="branding">
    <h1><img src="Nantucket Products_editedsmaller.jpg" width="482" height="326" /></h1>
        <p> </p>
        <div id="content-2">
      <div class="content-wrap">
        <p> </p>
        <p>ddddddddddddddddddddddddddddddddddddddddddddd</p>
        <p> </p>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <h1> </h1>
    <div id="wrapper-2">
      <div id="wrapper-3">
        <div id="content-bottom"></div>
      </div>
      <div id="footer">
        <p> </p>
        <p><a href="index.php" title="Lorentz Painting; Why us? We are the best and most affordable painting company in New England, MA, NH, NY, VT, CT, ME and etc.">Home</a> - <a href="gift_baskets.php" title="Lorentz Painting Co.: Products & Services; nothing but the finest painting products that can be found in the market., New England, VT, NH, MA, NY, CT, ME">Gift Baskets</a> - <a href="contact.php" title="Contact Lorentz Painting Co. Today for the best painting value in New England, VT, NH, MA, NY, CT">Contact</a></p>
<p><strong><a href="sitemap.html" title="Site Map of Lorentz Painting Co. the most professional and highest quality painting company in New England, VT, NY, NH, MA, ME, CT">The Nantucket Gift Basket Co., 2011</a></strong></p>
        <p><strong><a href="http://cwws.org" title="Common Wealth Web Solutions" target="_new">Designed by CWWS</a></strong>      </p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
swfobject.registerObject("Lorentz Painting Co.: The best value in painting in New England, NY, VT, NH, MA, ME, CT. A professional company that produces high quality results.");
swfobject.registerObject("Lorentz Painting Co.: The most Pristine, Precise and Professional Painting Company in New England, NY, VT, NH, MA, ME, CT.");
swfobject.registerObject("Lorentz Painting Co.: High Quality painting at an affordable price. Serving New England, NY, VT, NH, MA, ME, CT.");
</script>
</body>
</html>

Thank you guys for bringing me good advice/info, I attempt to put it to use tonight and I will get back to you and let you know how it goes.
Thanks!
Date: Tue, 7 Jun 2011 21:39:44 -0600
From: [email protected]
To: [email protected]
Subject: Centering a Div Horizontally
Have a look at the following simplified example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
     height: 100%;
     background: #CCC;
body {
     width: 960px;
     margin: auto;
     background: #FCF;
     height: 100%
h1 {
     margin: 1.5em 20px;
#header {
     width: 482px;
     margin: auto;
     height: 326px;
     background: #FF9;
     text-align: center;
</style>
</head>
<body>
<div id="header">
<p>this is the space for your image</p>
</div>
h1. This can be a header
</body>
</html>
Notice how, with a block element, the width is set to a value combined with a margin set to auto. This principle can be used for any block element including BODY
The idea is to keep it simple
Gramps
>

- How to vertically center a div?

How to vertically center a div? :-S

Cannot, really.
Read this -
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Reese" <[email protected]> wrote in message
news:eh34gg$rvh$[email protected]..
> How to vertically center a div? :-S
>

IPhone: Vertically centering UILabel text

The UILabel permits horizontal centering of its text via the textAlignment property, but there seems to be no way to align the text vertically. I have 3 labels, the last holding from one line to several. It if only has a single line, the text is vertically centered giving a big gap from he previous text. That looks uncool. (and in the Mac world, cool is everything). Is there some secret magical way to get UILabel to vertically center is text as well, or do I need to abandon labels and just drop down to drawRect.

Check out NSString(UIStringDrawing). It has the following method, which you can use to calculate the size of the text as it would be in the label. Then you can set the label height to the minimum necessary for the text, which will solve your vertically centering problem.
sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode:

Vertically centered file background matching

How can I have a vertically centered files background match
the background of the html file? I have seen it work, like for
example here:
http://www.aidlindarlingdesign.com/
You can see mine here which does not have the background
working yet:
http://www.agilitygraphics.com/clients/sams
Looks fine, if the browser window is only 600 or close to
that high. But if you open it further, the gradient of the file and
the page background don't match anymore. How would I fix this? Can
I have a transparent background to the file?
Thanks a lot for any help with this!

the aidlindarlingdesign site is using a transparent swf to
display the soft edges around their content. Google "transparent
swf" and you will find a multitude of competent tutorials on how to
do this.

Vertical centering

Using margin-left: auto; margin-right:auto; is good for centering an object horizontally
nice and easy and a reliable option when using box model positioning or absolute positioning with %.
my problem is that i need something centered vertically and margin-top: auto; margin-bottom: auto; does not work in the same way.
my object has to use absolute positining because it is hidden until another object is clicked on.
how can i make this vork

Easy
Here is an exemple
function(){return A.apply(null,[this].concat($A(arguments)))}
function(){return A.apply(null,[this].concat($A(arguments)))}<div style="position:absolute; left:50%; margin-left:-100px; top:50%; margin-top:-100px; width:200px; height:200px">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999">
    <tr>
      <td><img src="../Site web Final/images/w_siudmak_30gh.jpg" width="200" height="200" /></td>
    </tr>
</table>
</div>
The key is to put the margin left and top at Minus half the size of your thing. Then put the left and top at 50 %.
It need to be in a Div and voila. It is always centered.
Message was edited by: Chorale0001
You also need to set the div to the exact size of your content, otherwise, nothing good will happen. As in my exemple, everything is working fine.

AP element on centered content div

I'm trying to position an AP element relative to a content
div centered in the browser window but so far nothing has worked,
and I would rather not use relative positioning.
Any help would be greatly appreciated.

> didn't cross my mind to use relative positioning for the
wrapper div
> itself
It should have.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"JimHawkins" <[email protected]> wrote in
message
news:[email protected]...
> Thank you! That solved my problem.
>
> By the way, when I said I didn't want to use relative
positioning, I was
> referring to the elements I wanted to position within
the wrapper div; it
> didn't cross my mind to use relative positioning for the
wrapper div
> itself. I
> should have been more clear.
>

No vertical scroll in div

On the website I am doing I have 2 div's which should scroll
ALWAYS untill the bottom and ONLY vertically.
I did overflow: scroll; height: 100%; In Firefox/Mac it does
no horizontal scroll, but in IE/PC it does !?
Also , on both the scroll goes further than the bottom.
Look at
http://www.refunc.nl/refunc/
to see what I mean..
Thanks for any tips!

answered - not enough files within the stack grid view to make the scroll bar appear.

Centering ap div position problem

Hi people, I'm new to dreamweaver and have what seems to be a basic problem but one that I can't fix, even after looking on the forums and web.
My problem is when I go into design mode I can drag my "ap divs" around so they are in the centre of my screen (webpage) and nicely lined up, however once I test the website in any web-browser they are no longer centered and seem to reposition themselves at random. I've included some screen-shots so you can see what I mean.
Website in design view
Website in webbrowser
Here is my code so you can look at it and spot my mistakes.
<title>index</title>
</head>
<style type="text/css" >
body
background-image:url('background.png');
background-repeat:no-repeat;
background-position:50% -2%;
background-color:#D7D7D7;
</style>
<style type="text/css">
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 535px;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<style type="text/css">
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 360px;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
</style>
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</html>
If you can see the solution to my problem or if there is another/better way of centering text/banners using ap divs, then please let me know. Thanks in advance.

The biggest mistake that those new to Dreamweaver make is using Absolutely Positioned <divs>.
Why, because in most instances they will 'restrict' your construction. By their nature being Absolutely Positioned they do NOT move away from the co-ordinates that you give them. What you are seeing is the background image moving, its an illusion.
I would never advise anyone to use AP positioning unless they have a great deal of experience in positioning.
One way to control AP <divs> is to surround them in a 'wrapper' <div> (see code below)
<div id="wrapper">
<div align="center" id="apDiv1">This page was created by me on 28th Decmber 2099. Updated - 29th December 2099. </div>
<div align="center" id="apDiv2"><img src="banner.png" width="928" height="284" /></div>
</div>
Then use css to make the wrappers position 'relative' and to center it horizontally using margin: 0 auto (see below)
#wrapper {
position: relative;
width: 578px;
margin: 0 auto;
Your AP <divs> will now take their co-ordinates from the top/left of the 'wrapper' <div>
So alter your left positioning to 0 in your apDiv1 and apDiv2 (see below)
#apDiv1 {
          position:absolute;
          width:578px;
          height:57px;
          z-index:1;
          left: 0;
          top: 1526px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
#apDiv2 {
          position:absolute;
          width:937px;
          height:288px;
          z-index:1;
          left: 0;
          top: 14px;
          overflow: hidden;
          background-color: #transparent;
          color: #F90;
As the default position is left you don't really need to declare it but it does no harm if you do.

Vertical centering in Spark/Flex

I am horizontally dividing my panel between two elements.
To acheive that I am using the following layout controls
     <s:layout>
          <s:HorizontalLayout>
             <s:paddingBottom>20</s:paddingBottom>
             <s:paddingTop>50</s:paddingTop>
             <s:paddingLeft>20</s:paddingLeft>
             <s:paddingRight>20</s:paddingRight>
             <s:gap>300</s:gap>
          </s:HorizontalLayout>
     </s:layout>
This is splitting the panel correctly on the horizonal front.
However, I am then trying to center my other components vertically within the panel and am failing. My non-spark component seems to center perfectly using the following:
     <mx:VBox verticalGap="20" horizontalAlign="center">
          </mx:VBox>
However, when I add a second panel I can't seem to figure out how to center it vertically. I am using the following code:
<s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" horizontalCenter="0" verticalCenter="0">
     <s:layout>
     <s:VerticalLayout>
        </s:VerticalLayout>
     </s:layout>
</s:Panel>
Any advice on how to verticaly center that second panel is welcome.

UbuntuPenguin and _spoboyle -
   Thanks for the help. Setting the verticalAlign to middle and height to 100% seemed to mostly solve the issue.
That seems to line up the VBox and the Panel.. However, when I place an object into the panel that object isn't centered vertically within that panel. I have a mouse listener on the images in the VBox and when you click one it removes it from the VBox and adds it to the panel. The VBox recenters everything correctly, but the moved object is not centered.
<s:Panel verticalCenter="0" id="mainPanel" visible="true" width="100%" height="100%" backgroundColor="0x000000" creationComplete="hidePanelHeader(event)">
     <s:layout>
          <s:HorizontalLayout>
               
             <s:gap>300</s:gap>
             <s:verticalAlign>middle</s:verticalAlign>
          </s:HorizontalLayout>
     </s:layout>
     <mx:VBox backgroundColor="0xFFFFFF" height="100%" verticalGap="20" verticalAlign="middle">
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p6-550.png')" scaleX=".5" scaleY=".5"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p71" creationComplete="blinkP7Disk(p71)" mouseDown="exploreNode(p71)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p72" creationComplete="blinkP7Disk(p72)"/>
          <mx:Image source="@Embed(source='p7-750.png')" scaleX=".5" scaleY=".5" id="p73" creationComplete="blinkP7Disk(p73)"/>
     </mx:VBox>
     <s:Panel id="nodeExplorer" backgroundColor="0xFFFFFF" creationComplete="hidePanelHeader(event)" height="100%">
          <s:layout>
               <s:VerticalLayout>
                    <s:verticalAlign>middle</s:verticalAlign>
                    <s:gap>20</s:gap>
               </s:VerticalLayout>
          </s:layout>
     </s:Panel>
</s:Panel>

Centering One DIV in Another DIV

Hi --
On this page:
http://www.mort.thelegatogroup.com/
the DIV #navigation is
set to extend left to right across the viewport. Within
#navigation is
another DIV -- #navbuttons -- that I want centered on the
screen.
While it's centered in IE6 I cannot get it centered in FF.
Can someone give
me a hand?
Thanks,
John

Give the inner div a CSS width, and left/right margins of
"auto".
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Tarvardian" <[email protected]> wrote in
message
news:epqoa1$l1h$[email protected]..
> Hi --
>
> On this page:
http://www.mort.thelegatogroup.com/
the DIV #navigation is
> set to extend left to right across the viewport. Within
#navigation is
> another DIV -- #navbuttons -- that I want centered on
the screen.
>
> While it's centered in IE6 I cannot get it centered in
FF. Can someone
> give me a hand?
>
> Thanks,
> John
>

Vertically centering a div

Similar Messages

Maybe you are looking for