Home/ Questions/Q 617149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T18:24:12+00:00

The text ‘Step 1’ is not centering on the image no matter what I

  • 0

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">

<html xmlns="http://www.w3.org/1999/xhtml">
  <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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Does this get the effect you are after

    .top-text
    {
        /*display: inline;
        margin: 0px 0px 50px 0px;*/
        margin:auto;
        text-align:center;

    }

    Or, if I read it a different way you might mean this:

    .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;
    }

    You might need to play with the margin in div.content to get the top spacing you want.

    • 0