以CSS中的背景爲中心div

我試圖將文字和圖標居中，但圖標設置在背景中。以CSS中的背景爲中心div

如何處理文本居中並將圖標設置在文本左側。

這裏是小提琴和代碼：jsfiddle

<div class="error divError" style="text-align: center"> 
      <p class="errorplaceholder">Error Text</p> 
     </div> 


.divError { 
    background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat scroll left center rgba(0, 0, 0, 0); 
    color: #FF0000; 
    font-weight: bold; 
    margin: auto; 
    padding: 5px 10px 5px 25px; 
}

在此先感謝

來源

2014-01-31 clement

充分利用號碼：

display: inline-block; 
padding: 0 0 0 'your_image_width'; 
background: url('you_image_url') left center no-repeat;

而且DIV：

text-align: center;

我想這應該給的伎倆。如果沒有，這個想法是明確的:)。

來源

2014-01-31 09:32:38

fixed

HTML：

<body> 
    <div class="error divError" style="text-align: center"> 
     <p class="errorplaceholder"> 
      <img src="https://www2.eiffel.com/download/images/warning_icon.png" alt="1" /> <span>Error Text</span> 
     </p> 
    </div> 
</body>

CSS：

.divError { 
    color: #FF0000; 
    font-weight: bold; 
    margin: auto; 
    padding: 5px 10px 5px 25px; 
}

來源

2014-01-31 09:32:32 deW1

這是一個很好的解決方案，但我認爲，這種形象必須是插件CSS。 –

將圖像設置爲before段落的僞元素的內容。
這樣做你不需要預先知道你的圖標的寬度，並設置填充或做出假設用百分比

.divError { 
    color: #FF0000; 
    font-weight: bold; 
    margin: auto; 
    padding: 5px 10px 5px 25px; 
} 

.divError p:before { 
    content: url("https://www2.eiffel.com/download/images/warning_icon.png"); 
}

例如撥弄http://jsfiddle.net/8RQfX/6/
實例與正確的垂直取向一些額外的代碼）：http://jsfiddle.net/8RQfX/6/

來源

2014-01-31 09:33:35 fcalderan

這是一個好主意！祝賀:)。對於沒有'conent：'的尋找解決方案的人，試試我的答案。 +1。 –

希望這有助於

.divError { 
background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat   scroll rgba(0, 0, 0, 0); 
background-position:45% 50%; 
color: #FF0000; 
font-weight: bold; 
margin: auto; 
padding: 5px 10px 5px 25px; 
}

來源

2014-01-31 09:37:05 winnyboy5

您可以使用位置百分比的背景位置致敬得到這個完成，如果你堅持認爲圖標應該作爲背景圖像。

background: url("https://www2.eiffel.com/download/images/warning_icon.png") no-repeat scroll 40% 50% rgba(0, 0, 0, 0);

這些值應該爲你做。

但我覺得，如果圖標放置在一個單獨的跨度上會更好。

來源

2014-01-31 09:37:13 sivakdeva

您可以使用CSS的calc屬性：

background-position:calc(50% - 40px) center;

的jsfiddle：http://jsfiddle.net/8RQfX/7/

來源

2014-01-31 09:37:17

並非所有的瀏覽器都很友好，但在我看來，最好的答案是。 +1。 –

是啊......謝謝！ –

如果文本增加，它不會自動調整。 –

以CSS中的背景爲中心div

回答

相關問題