Dreamweaver Centring a web page

Report · Mar 19, 2018

Hi I have created a web page and want to know how to centre it on a page. Can anyone help please.

Thanks

Geoff

Report · Mar 19, 2018

have you try this helpers

Report · Mar 19, 2018

1. Make sure the container you're trying to center is NOT set to 100% width (any % less than 100 will work fine, pixels, em, etc)

2. Make sure the container you're centering is NOT set to position:absolute (do NOT use APDivs from older versions of DW)

3. Give that container a margin setting of 0 auto (it would look like "margin:0 auto;" in the css)

That will center your container within its parent element, if there is any room within the parent to split on either side of the container. Meaning, if you set your container to width:980px, and the parent container is also 980px, you will see no apparent centering, because there's no space to split between the right and left side (what setting the auto in margin:0 auto does). However if the parent element is wider (or 100%) whatever remaining space there is beyond the centered container's width setting and the parent's width, will be split between the left and right margins, centering the container.

Report · Mar 19, 2018

BOOTSTRAP 3 (Floats)

use the center-block class and add this to your custom CSS file. .center-block {float none}

This div is centered.

</div>

BOOTSTRAP 4 (Flexbox)

use the mx-auto class.

This div is centered.

</div>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 23, 2018

I have added the bootstrap 3 code above, suggested by Nancy, in an effort to centre my banner image called multiphoto_logo2.jpg but it does not work. I have added a class of row and within that have added another div which has the two classes col-sm-8 and center-block

here is the page: http://v37.ancestry.higgsy.co.uk/binning_harry_ernest_monty.php

Report · Apr 23, 2018

O urge you to get rid of all the other CSS code and just stick with Bootstrap for now. In this example, I have a logo and navbar on top of the page followed by a jumbotron with a responsive, centered image.

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

<style>

/**Offset for top navbar**/

body {padding-top: 60px}

.center-block {float:none}

.navbar {min-height: 65px /**same height as logo**/}

.navbar-brand {margin:0; padding:0;}

.navbar-right {margin-top: 8px; /**adjust as req'd**/}

</style>

</head>

<body>

</button>

</div>

</ul>

</div>

</nav>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Dreamweaver Centring a web page

1 Correct answer