Centering a divider in middle of page?

Posted on 2008-11-03
Last Modified: 2012-06-22
How do you center a divider in the middle of a page both vertically and horizontally so it's exactly in the middle of a browser?
Question by:magnumdirectory
    LVL 42

    Accepted Solution

    There are a few ways to do that. Each has its pros and cons.

    LVL 3

    Expert Comment

    get the window size and find the middle and set the divider.

      var wide = window.screen.availWidth
      var high = window.screen.availHeight
    LVL 2

    Expert Comment

    Assume that the following is the divider:

    <img src="divider.gif" style="width: 200px; margin-left:auto; margin-right:auto;" />

    width is the width of your image and divider.gif is the path of the image on the server.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now