Question

我希望在文本框中添加文字和图标。我希望图标位于左侧，文本将在框中居中对齐。我遇到了一些麻烦。以下是我到目前为止：http://jsfiddle.net/rFbZC/

以下是小提琴中的一些内容：

<div class="icon"></div><h3>Heading</h3>

和一些风格：

.icon {
    background-image:     url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/256/Tools-Hammer-icon.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    display: inline-block;
}

h3 {
    text-align: center;
    display: inline-block;
}

谢谢！

Answer 1

我给图标绝对定位并从标题中删除内联块显示：

.icon {
    background-image: url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/256/Tools-Hammer-icon.png);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    position:absolute;
}
h3 {
    text-align: center;
}

<强> jsFiddle example

Answer 2

将以下内容添加到您的css规则

.box {
  text-align:center;
}
.icon {
 float:left;
}

JSFiddle

<强>更新

我不会仅仅使用专用元素来显示图标。您可以在此处使用::before或::after伪元素，如下所示：

.box {
  position:relative;
  width: 300px;
  height: 400px;
  padding: 10px;
  text-align:center;
  border: solid 1px black;
}
.box::before{
  content:"";
  position:absolute;
  left:10px;;
  top:10px;
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/256/Tools-Hammer-icon.png);
  background-size: 30px 30px;
}

JSFiddle

Answer 3

~~最简单的解决方法是将margin-bottom: -6px;或position: relative; bottom: -6px;添加到.icon~~

编辑：抱歉，我们没有注意您希望文本对齐中心的部分。

快捷方式： 从display: inline-block;移除h3，之后将position: relative; bottom: -12px;添加到.icon。 http://jsfiddle.net/VK7NE/

理想的方式： 或者您可以尝试http://jsfiddle.net/L997D/1/ - 图标和标题将垂直对齐，而忽略.icon高度。

居中文字并左侧对齐图标

3 个答案: