Question

无论我作为边距放入什么，文字“第1步”都不以图像为中心。我没有任何上传atm的地方，但是还有一个屏幕抓取： http://i.imgur.com/fWrQp.png

我希望文本与图像的中心对齐。

有什么建议吗？

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

Answer 1

这是否会影响您的效果

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

    }

或者，如果我以不同的方式阅读它，您可能会这样说：

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

您可能需要使用div.content中的边距来获得所需的顶部间距。

麻烦对齐Div

1 个答案: