Question

我试图将文字和图标居中，但图标是在后台设置的。

如何使文本居中并在文本左侧设置图标。

这是小提琴和代码：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;
}

提前致谢

Answer 1

制作p：

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

而div：

text-align: center;

我认为这应该是诀窍。如果没有，这个想法很清楚：）。

Answer 2

将图片设置为段落的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/

Answer 3

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

Answer 4

希望这有帮助

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

Answer 5

如果你坚持图标应该作为背景图片，你可以使用background-position属性中的位置百分比来完成这项工作。

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

这些值应该适合你。

但我觉得，如果图标放在一个单独的范围内会更好。

Answer 6

您可以使用css的calc属性：

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

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

在CSS中居中一个带背景的div

6 个答案: