文字寬度受圖像的限制

在我的網站中，我有一張圖像，下方有文字。文字寬度受其上方圖像的100px寬度限制。我寧願文字寬度與圖像寬度無關。這是我的代碼。文字寬度受圖像的限制

HTML：

<div class="col-md-3"> 
    <div class="customizing text-center"> 

    <span class="process-icon icustomize">&nbsp;</col> 
     <h4>Customizing</h4> 
     <p class="text-center">We create custom 
      there is random text here.</p> 
     <a href="#" class="btn btn-default">Read More</a> 
    </div> 
</div>

CSS：

.process-icon{ 

    display: inline-block; 
    height: 100px; 
    width: 100px; 
    background: transparent url(img/process-sprite.png) no-repeat; 
    background-position: top left; 
}

來源

2014-11-25 Brandon

這不是一個圖像這是限制性的寬度;你的CSS規則中有一個寬度屬性。你試圖達到什麼目標？ – PavKR 2014-11-25 09:39:13

我認爲問題在於你沒有''的結束標記。 – Chryb 2014-11-25 09:41:17

我有4個圖像連續100px並排（總共400px）。圖像分佈在整個頁面上，每個新圖標移動-100px-200px和-300px以顯示不同的圖標。我在每個圖標下都有文字，但我希望文字比圖標更寬。 – Brandon 2014-11-25 09:44:33

您已設置的寬度值，所以它不是導致此圖像。正如您在評論中提到的，您尚未正確關閉"<span>"標籤。

添加

</span>

這將解決這個文本圖像下面要對齊，然後改變你的代碼如下。

width: 100px; 

    To 

    width: 100%; //can be whatever you need

FIDDLE

來源

2014-11-25 09:39:17 Haris

文字寬度受圖像的限制

回答

相關問題