故障排列分区

无论我输入的边距是多少，文本“步骤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>

来源

2010-02-19 jriggs

我不明白。你在说左边有1和粉红下箭头的图像吗？ – Catfish 2010-02-19 18:49:46

这是否让你的效果后

.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中的边距以获得所需的顶部间距。

来源

2010-02-19 18:44:04 MrChrister

没有抱歉，它看起来像保存图像的div只有文本（不是图像的整个高度），并且'step 1'div与该图像对齐。如果我上传1.png文件，这样可以帮助您在本地查看它吗？我希望文字与图像的中心对齐 – jriggs 2010-02-19 18:49:04

如果您可以上传 – MrChrister 2010-02-19 19:01:13

之后的模拟内容，这将会很酷到达目的地 - 我希望文字位于图像的右侧并垂直居中。删除内联和添加图像类让我非常接近。 – jriggs 2010-02-19 19:01:45

故障排列分区

回答

相关问题