Trouble Aligning Div

The text 'Step 1' is not centering on the image no matter what I put in as the margin. I dont have any where to upload atm but heres a screen grab: http://i.imgur.com/fWrQp.png

I want the text to align with the center of the image.

Any suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <head>
  <style type="text/css" media="screen">
/*<![CDATA[*/
    <!--


    div.basic{
         margin-left: auto ;
        margin-right: auto ;
        border-style:solid;
        width:750px;
    }

    div.top-level {
        /*background-color: #FBEC5D;*/
        border-style:solid;
        border-color:#0000FF; 
        margin: 20px 20px 0px 20px;
        background: url(light_pink_bg.gif) repeat-y 9px;
    }

    div.content{
        background-color: #EEEEEE;
        border-style: dotted;
        margin: 5px 5px 5px 48px;
    }

    .arrow_down
    {
        background: url(arrow_down.gif) no-repeat 32px 0;
        height: 17px;
    }

    .top-header
    {
        display: inline;
        margin: 0px 0px 30px 25px;
    }

    .top-text
    {
        display: inline;
        margin: 0px 0px 50px 0px;

    }

    .step-number
    {
        display: inline;
        height:100%;
    }


    .active_cnt
    {
        background: url(light_pink_bg.gif) repeat-y 9px;
    }



    -->
    /*]]>*/
    </style>

    <title></title>
  </head>
  <body>

    <div class="basic">
      <div class="top-level">
        <div class="step-number">
          <img src="1.png" alt ="1" height="45px" width="45px" />
        </div>

        <div class="top-text">Step 1</div>
        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
            Curabitur a odio lacus. Nam porttitor odio nec quam suscipit rutrum. <br />
            Etiam velit felis, bibendum et tincidunt et, porta eget neque. <br />
            Proin id sapien nec risus congue malesuada vitae ut lorem.<br /> 
            Proin diam eros, porttitor id rutrum quis, tempus hendrerit nisl.
          </p>
        </div>
      </div>
      <div class="arrow_down">
         
      </div>
    </div>
  </body>
</html>

.top-text { display: inline; position:relative; float:left; margin-top:5px; } .step-number img { float:left; height:100%; } div.content{ background-color: #EEEEEE; border-style: dotted; margin: 55px 5px 5px 48px; }

No sorry, it looks like the div that holds the image is only as tall as the text is (not the full height of the image), and the 'step 1' div is aligning with that. Would it help if I upload the 1.png file so you can view it locally? I want the text to align with the center of the image

jriggs 2010-02-19 18:49:04

It would be cool if you could upload a mock up of what you are after

MrChrister 2010-02-19 19:01:13

Getting there - I want the text to the right of the image and vertically centered on it. Removing the inline and adding the image class got me pretty close.

jriggs 2010-02-19 19:01:45

ansaurus

tags:

views:

answers:

Trouble Aligning Div

related questions