Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Re: CSS - Center a

Expand Messages
  • david brown
    My IE5+=Looks like its gotta come a tad left. ScreenShot of it=Attachment. ... From: wilkinsonm To: Sent:
    Message 1 of 7 , May 3, 2002
    View Source
    • 0 Attachment
      My IE5+=Looks like its gotta come a tad left. ScreenShot of it=Attachment.
      ----- Original Message -----
      From: "wilkinsonm" <mikew@...>
      To: <ntb-html@yahoogroups.com>
      Sent: Friday, May 03, 2002 13:02
      Subject: [NH] Re: CSS - Center a <DIV>


      > My goal was to center the blue square horizontally within the browser
      > window. Since this technique use CSS positioning, I expect it will
      > only work in IE5+ and NS6.
      >
      > If you resize your browser window, then click on Refresh, hopefully
      > you will see that the blue square becomes centered. If not, I would
      > appreciate your feedback. It would be helpful to know what browser
      > and version you're using.
      >
      > Thanks!
      >
      > Mike Wilkinson
      > http://websites-graphics.biz
      >
      > "Don Passenger" wrote:
      > > Mike, the red square is vertically centered on the blue background,
      > but the
      > > blue isn't centered on anything as near as I can figure ...
      > > No idea what you were trying to do.
      >
      >
      >
      >
      >
      > Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
      >
      >


      [Non-text portions of this message have been removed]
    • wilkinsonm
      Thanks for the feedback. My example is definitely just a prototype. I do like your code snippet. It s simpler than what I had in mind. Thanks! Mike Wilkinson
      Message 2 of 7 , May 3, 2002
      View Source
      • 0 Attachment
        Thanks for the feedback. My example is definitely just a prototype. I
        do like your code snippet. It's simpler than what I had in mind.
        Thanks!

        Mike Wilkinson
        http://websites-graphics.biz
      • Larry Hamilton
        Works in IE 6.x, WinXP Home. Larry
        Message 3 of 7 , May 3, 2002
        View Source
        • 0 Attachment
          Works in IE 6.x, WinXP Home.

          Larry

          > My goal was to center the blue square horizontally within the browser
          > window. Since this technique use CSS positioning, I expect it will
          > only work in IE5+ and NS6.
          >
          > If you resize your browser window, then click on Refresh, hopefully
          > you will see that the blue square becomes centered. If not, I would
          > appreciate your feedback. It would be helpful to know what browser
          > and version you're using.
        • Lotta
          ... Mike, since you have an explicit width and use absolute positioning anyway you can easily center the element by positioning it in the middle of the screen
          Message 4 of 7 , May 3, 2002
          View Source
          • 0 Attachment
            >My goal was to center the blue square horizontally within the browser
            >window. Since this technique use CSS positioning, I expect it will
            >only work in IE5+ and NS6.

            Mike, since you have an explicit width and use absolute positioning anyway
            you can easily center the element by positioning it in the middle of the
            screen and then give it a negative margin of half it's own width. No
            scripting needed.

            div
            { width: 700px; height: 200px; background-color: blue;
            position: absolute; top: 100px; left: 50%; margin-left: -350px;
            margin-right: auto }

            Lotta
          Your message has been successfully submitted and would be delivered to recipients shortly.