Skip to main content
A
Anonymous
March 19, 2018
Answered

Dreamweaver Centring a web page

  • March 19, 2018
  • 3 replies
  • 560 views

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 has been closed for replies.
    Correct answer Nancy OShea

    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>

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    March 19, 2018

    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— Product User & Community Expert
    higgsyd
    higgsyd
    Inspiring
    April 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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 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>

    <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— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    March 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.

    B i r n o u
    B i r n o u
    Legend
    March 19, 2018

    have you try this helpers

    How to Center in CSS

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices