Member Avatar for Aviplo

Can anyone please tell me how can i keep the whole page in the center of the screen?

please help!!

  • 4 Contributors
  • 7 Replies
  • 3K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Aviplo

Dani AI

Generated

Good instincts from @Stefano Mtangoo and @diafol: centering is purely CSS. Two quick gotchas in your markup are causing the red block to hug the left: style="align:center;" on <body> is not a valid CSS property, and #content_2 is absolutely positioned with a fixed left, which overrides any page centering. Also, the old HTML align="center" approach shown by is deprecated; prefer CSS.

If you just want a centered page column that stays responsive, a simple modern pattern is a grid-based wrapper. It avoids fixed widths and works across screen sizes:

/* center the whole page column */
html, body { margin: 0; }
body {
  display: grid;
  grid-template-columns: 1fr min(900px, 100%) 1fr; /* center column */
}
.page { grid-column: 2; } /* wrap all page content in .page */
<body>
  <div class="page">
    <!-- your entire page goes here -->
  </div>
</body>

For the red section specifically, your left: 5px; position: absolute; pins it left. Either let it participate in normal flow and center its content:

#content_2 { position: static; text-align: center; }
#content_2 img { display: block; margin-left: auto; margin-right: auto; }

Or, if you must keep it absolutely positioned at a certain vertical offset, center it relative to a positioned parent:

/* ensure the parent (e.g., #container or .page) is the positioning context */
.page { position: relative; }

#content_2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* keep your existing top value */
}

Checklist: remove align:center; from <body>, give the page a single wrapper (.page), avoid absolute positioning for layout, and only use position: absolute for overlays or effects.

Recommended Answers

All 7 Replies

Member Avatar for Stefano Mtangoo

that is the work of HTML/CSS. PHP does not know anything about markup and is processed on server!

Member Avatar for shahbaz13

Using html... you can create a div tag and put the content in it... like

<div id="content" align="center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
Edited by shahbaz13 because: n/a
Member Avatar for Member #120589

centre whole page - easy with a wrapper div about the whole thing:

body{
  text-align: center;
}
#wrapper{
  margin: 0 auto;
  width: 900px;
  text-align: left;
}

The text-align stuff is probably unnecessary, but I remember problem with IE6 - I think that solved it.

<body>
  <div id="wrapper">
    ...page...
  </div>
</body>
Member Avatar for Aviplo

Thank you :D

Member Avatar for Aviplo

Thanks for your advice i tried that and now tho whole thing is in the middle except one thing that i marked red.

here is the code

<body style = "align:center;">
<!-- helloween div-->
<div id="wrap" onclick="return wrap_onclick()">
<div class="xlabel" style="text-align :right;margin-left:10px;">&nbsp
 <div id="jack" style="visibility:hidden;position:absolute;z-index:3" >
<img src="flying_bat48.gif" style="height:48px;width:48px" alt="fying bat"/>
</div>

<div id="container">
        <div id="navigation">
            <ul>
                <li><a HREF="contactUs.php" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"><b>CONTACT US</a></li>  
                <li><a href="javascript:MM_openBrWindow('about.php','','width=470,height=350')" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"><b>ABOUT US</a></li>
                <li><a class="active" HREF="index.php" onMouseOver="playSound(0)" onMouseOut="stopSound(0)"><b>HOME</a></li>


            </ul>
        </div>
        <div id="nav">
        <div id="current">
            <?php
            include "connect.php";
            include "type_list.php";
            ?> 
        </div>
        </div>

    <!--random screenprinting-->
        <div id="random_Image">
        <script language="JavaScript1.2">

        var clickmessage="ืNot allow to save!!"

        function disableclick(e) {
        if (document.all) {
        if (event.button==2||event.button==3) {
        if (event.srcElement.tagName=="IMG"){
        alert(clickmessage);
        return false;
        }
        }
        }
        else if (document.layers) {
        if (e.which == 3) {
        alert(clickmessage);
        return false;
        }
        }
        else if (document.getElementById){
        if (e.which==3&&e.target.tagName=="IMG"){
        alert(clickmessage)
        return false
        }
        }
        }

        function associateimages(){
        for(i=0;i<document.images.length;i++)
        document.images[i].onmousedown=disableclick;
        }

        if (document.all)
        document.onmousedown=disableclick
        else if (document.getElementById)
        document.onmouseup=disableclick
        else if (document.layers)
        associateimages()
        </script>
        <a id="imageLink" href="#">
        <img id="image" src="<?php echo "images_small/".$photo_prd ; ?>" alt="" />
        </a>
        </div>
<!--end random  screenprinting-->
<!--random bestseller-->
        <div id="random_Image2">
            <a id="imageLink2" href="#">
                <img id="image2" src="<?php echo "images_bestsel/".$photo_prd2 ; ?>" alt="" />
            </a>
        </div>
<!--end random bestseller-->
</div>
        [COLOR="Red"]<div id ="content_2">
        <a><img src="bestseller.gif"></a>
        </div>[/COLOR]
        </div>
        </div> 

</body>
Edited by TrustyTony because: fixed formating
Member Avatar for Aviplo

that red part that i mention above is still on the left.

Member Avatar for Aviplo

and here is the css for that

#content_2 {
position: absolute;
top: 293px;
left: 5px;
list-style: none;
}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.