故障排列分區

無論我輸入的邊距是多少，文本「步驟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

故障排列分區

回答

相關問題