Highlighted

Dreamweaver Centring a web page

New Here ,
Mar 19, 2018

Copy link to clipboard

Copied

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

Thanks

Geoff

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

BOOTSTRAP 3 (Floats)

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

<div class="container">

<div class="row">

<div class=col-sm-8 center-block">

This div is centered.

</div>

</div>

</div>

BOOTSTRAP 4 (Flexbox)

use the mx-auto class.

<div class="container">

<div class="row">

<div class="col-sm-8 mx-auto">

This div is centered.

</div>

</div>

</div>

Views

241

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dreamweaver Centring a web page

New Here ,
Mar 19, 2018

Copy link to clipboard

Copied

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

Thanks

Geoff

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

BOOTSTRAP 3 (Floats)

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

<div class="container">

<div class="row">

<div class=col-sm-8 center-block">

This div is centered.

</div>

</div>

</div>

BOOTSTRAP 4 (Flexbox)

use the mx-auto class.

<div class="container">

<div class="row">

<div class="col-sm-8 mx-auto">

This div is centered.

</div>

</div>

</div>

Views

242

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 19, 2018 0
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

have you try this helpers

How to Center in CSS

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 1
Adobe Community Professional ,
Mar 19, 2018

Copy link to clipboard

Copied

BOOTSTRAP 3 (Floats)

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

<div class="container">

<div class="row">

<div class=col-sm-8 center-block">

This div is centered.

</div>

</div>

</div>

BOOTSTRAP 4 (Flexbox)

use the mx-auto class.

<div class="container">

<div class="row">

<div class="col-sm-8 mx-auto">

This div is centered.

</div>

</div>

</div>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2018 0
Participant ,
Apr 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0
Adobe Community Professional ,
Apr 23, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest minified Bootstrap 3 CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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>

<!--begin top navbar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<!--BRAND-->

<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a>

</div>

<!--MENU ITEMS-->

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">MENU 1</a></li>

<li><a href="#">MENU 2</a></li>

<li><a href="#">MENU 3</a></li>

<li><a href="#">MENU 4</a></li>

<li><a href="#">MENU 5</a></li>

</ul>

</div>

</div>

<!--end top navbar--></nav>

<div class="jumbotron">

<img class="img-responsive center-block" src="https://dummyimage.com/1200x500" alt="placeholder">

</div>

<!--latest jQuery JS-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Latest Bootstrap JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 23, 2018 0