Vertical align image within a DIV in IE?

Discussion in 'HTML' started by Paul Lautman, Apr 2, 2006.

  1. Paul Lautman

    Paul Lautman Guest

    I know that this has been asked many times but I cannot find a definitive
    answer to it.

    I have the following css and html and I would like to have a couple of
    images vertically aligned within the div.

    Can anyone point me to a decent incarnation for it?

    #header {
    float: left;
    padding: 0px;
    margin-right: 2px;
    width: 635px;
    height: 150px;
    vertical-align: middle;
    }

    <div id="header">
    <img src="images/newbadge2.gif" alt=""/>
    </div>

    TIA
    Paul
     
    Paul Lautman, Apr 2, 2006
    #1
    1. Advertising

  2. Paul Lautman

    Neredbojias Guest

    To further the education of mankind, "Paul Lautman"
    <> declaimed:

    > I know that this has been asked many times but I cannot find a
    > definitive answer to it.
    >
    > I have the following css and html and I would like to have a couple of
    > images vertically aligned within the div.
    >
    > Can anyone point me to a decent incarnation for it?
    >
    > #header {
    > float: left;
    > padding: 0px;
    > margin-right: 2px;
    > width: 635px;
    > height: 150px;
    > vertical-align: middle;
    > }
    >
    > <div id="header">
    > <img src="images/newbadge2.gif" alt=""/>
    > </div>
    >
    > TIA
    > Paul


    If you want them dynamically v|aligned, you need a table.

    http://www.neredbojias.com/zyxix/vcsc/vcsc.html

    --
    Neredbojias
    Apprentice Learner
     
    Neredbojias, Apr 3, 2006
    #2
    1. Advertising

  3. If a static image, go ahead and add it to the header css, e.g.

    #header {
    float: left;
    padding: 0px;
    margin-right: 2px;
    width: 635px;
    height: 150px;
    background:url(images/newbadge2.gif) no-repeat center;
    }

    Yucky,
    Yukky Korpulent
     
    Yucky Korpulent, Apr 3, 2006
    #3
  4. Paul Lautman

    Paul Lautman Guest

    Yucky Korpulent wrote:
    > If a static image, go ahead and add it to the header css, e.g.
    >
    > #header {
    > float: left;
    > padding: 0px;
    > margin-right: 2px;
    > width: 635px;
    > height: 150px;
    > background:url(images/newbadge2.gif) no-repeat center;
    > }
    >
    > Yucky,
    > Yukky Korpulent


    I need it centered vertically on the left of the block with another image to
    the right of it.
     
    Paul Lautman, Apr 3, 2006
    #4
  5. Paul Lautman

    Paul Lautman Guest

    Neredbojias wrote:
    > To further the education of mankind, "Paul Lautman"
    > <> declaimed:
    >
    >> I know that this has been asked many times but I cannot find a
    >> definitive answer to it.
    >>
    >> I have the following css and html and I would like to have a couple
    >> of images vertically aligned within the div.
    >>
    >> Can anyone point me to a decent incarnation for it?
    >>
    >> #header {
    >> float: left;
    >> padding: 0px;
    >> margin-right: 2px;
    >> width: 635px;
    >> height: 150px;
    >> vertical-align: middle;
    >> }
    >>
    >> <div id="header">
    >> <img src="images/newbadge2.gif" alt=""/>
    >> </div>
    >>
    >> TIA
    >> Paul

    >
    > If you want them dynamically v|aligned, you need a table.
    >
    > http://www.neredbojias.com/zyxix/vcsc/vcsc.html


    The whole template is built with DIVs. I had already tried puting a table
    into this particular div but then it totally cocked up the vertical height
    of the DIV.
     
    Paul Lautman, Apr 3, 2006
    #5
  6. Paul Lautman

    Neredbojias Guest

    To further the education of mankind, "Paul Lautman"
    <> declaimed:

    > Neredbojias wrote:
    >> To further the education of mankind, "Paul Lautman"
    >> <> declaimed:
    >>
    >>> I know that this has been asked many times but I cannot find a
    >>> definitive answer to it.
    >>>
    >>> I have the following css and html and I would like to have a couple
    >>> of images vertically aligned within the div.
    >>>
    >>> Can anyone point me to a decent incarnation for it?
    >>>
    >>> #header {
    >>> float: left;
    >>> padding: 0px;
    >>> margin-right: 2px;
    >>> width: 635px;
    >>> height: 150px;
    >>> vertical-align: middle;
    >>> }
    >>>
    >>> <div id="header">
    >>> <img src="images/newbadge2.gif" alt=""/>
    >>> </div>
    >>>
    >>> TIA
    >>> Paul

    >>
    >> If you want them dynamically v|aligned, you need a table.
    >>
    >> http://www.neredbojias.com/zyxix/vcsc/vcsc.html

    >
    > The whole template is built with DIVs. I had already tried puting a
    > table into this particular div but then it totally cocked up the
    > vertical height of the DIV.


    This is a case where a url would have been most helpful. Your reply is
    quite illogical.

    --
    Neredbojias
    Apprentice Learner
     
    Neredbojias, Apr 3, 2006
    #6
  7. Opt 1. Use a graphics editor to combine them into a single image

    Opt 2. Create style definitions for your images, using relative
    positioning to get them where you want. For example,

    #imgLeft {
    position:relative;
    top:40px; /* or whatever */
    left:10px; /* etc. */
    }
    #imgRight {
    position:relative;
    top:40px; /* or whatever */
    left:400px; /* etc. */
    }

    In this case you are specifying the vertical position yourself rather
    than vertical aligning, but since your DIV has specified dimensions
    anyway, this should get you want you want. There are ways of using CSS
    positioning to achieve true middle vertical alignment for the images
    but these can lack cross-browser consistency. Google "css vertical
    center div" for tons of examples.

    Good luck. Yucky,
    Yukky Korpulent
     
    Yucky Korpulent, Apr 3, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,167
  2. Jochen Fuhrmann

    vertical-align and div

    Jochen Fuhrmann, Oct 6, 2003, in forum: HTML
    Replies:
    1
    Views:
    24,466
    Steve Pugh
    Oct 6, 2003
  3. Tobias Müller

    div and vertical align

    Tobias Müller, Nov 25, 2003, in forum: HTML
    Replies:
    2
    Views:
    683
    Steve Pugh
    Nov 25, 2003
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    [CSS] Div-Tag and Vertical Align

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006, in forum: HTML
    Replies:
    6
    Views:
    22,539
    dorayme
    Aug 22, 2006
  5. Replies:
    7
    Views:
    1,361
    dorayme
    Nov 14, 2007
Loading...

Share This Page