A

Anonymous

Answered

Dreamweaver Centring a web page

5 replies
578 views
Translate

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

Thanks

Geoff

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OSheaCorrect answer

Community Expert

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

Nancy OShea

Correct answer

Community Expert

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>

Translate

Nancy O'Shea— Product User & Community Expert

higgsyd

Inspiring

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

Translate

Nancy OShea

Community Expert

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>

Translate

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

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.

Translate

B i r n o u

Legend

have you try this helpers

How to Center in CSS

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.