Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: centering DIVs?

  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    centering DIVs?

    Is there a way to center a DIV in a page without having to specify margins? The reason I ask is this.

    http://www4.ncsu.edu/~mpborkow/announce.html

    I want the picture to have an even border on all 4 sides. If I specify a margin using percentages the left and right borders will change depending on window size. Using pixels will also yeild different results based on window size. Seems like I should just be able to do "align: center" and have the DIV centered in the page...but that doesn't work. I would just specify the image border using "border" in the img tag, but I was under the impression you can only use solid colors in that case, and not a pattern.

    -Matt

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I really get you...

    margin: 0 auto;

    ...would make the DIV align horizontally. Aligning vertically is a different matter - I think it involves the use of JavaScript.

    As for borders - border: 1px solid #000 ?

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts
    margin: 0px auto; will center the image in the middle horizontally. I don't really know of a method to do this vertically, though.

    Chris

    Edit: Mark87 beat me to it, LOL

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am talking about horizontal centering...but I think you guys missed my intent. Notice how the light blue background surrounding the picture extends all the way across the page? I don't want that...I just want it to extend away from the picture about 4px on each size. The problem using just a simple border around the picture is that I can only set a border to a solid color, unless I've been mislead. So I was trying to create the border using the DIV tag...but I can't figure out how to keep the background from extending all the way across the page on the left and right side of the picture.

    -Matt

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    The wild blue yonder
    Posts
    283
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your code is confusing to me because you're using CSS BG images and having them wrap HTML images. Go with one or the other, IMO.

    Anyway, I haven't tested this, but I THINK that changing this:
    Code:
    #inset {align: center;
            width: 100%;
            margin-right: 1%;
            margin-left: 1%;
            margin-top: 5px;
            background: url("graphics/cutecolorsbearbg2.gif");
            }
    To this:
    Code:
    #inset {align: center;
            width: 60%;
            margin-right: 1%;
            margin-left: 1%;
            margin-top: 5px;
            background: url("graphics/cutecolorsbearbg2.gif");
            }
    I believe that will keep the light blue image centered and only a little bit beyond the sonogram image. Try different percentages and see what you get.

    HTH,

    Chris

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try something like this

    Code:
    #picture {
              text-align: center;
              margin: 0 auto;
              background: url("graphics/cutecolorsbearbg3.gif");
              width: 562px;
              height: 428px;
             }
    #picture img {
              margin: 4px;
             }
    Code:
    <div id="picture">
    <img src="pictures/profile.jpg">
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •