居中文字并图标向左对齐

debugcn 发表于 Dev

比利·雅各布森（Billy Jacobson）

我想在框内有一个带有文本和图标的标题。我希望图标在左侧，文本在框中居中对齐。我对此有些麻烦。这是我到目前为止的内容：

.box {
  border: solid 1px black;
  width: 300px;
  height: 400px;
  padding: 10px;
}

.icon {
  background-image: url(http://placehold.it/100x100/CCCCCC&text=icon);
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  display: inline-block;
}

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

<div class="box">
  <div class="icon"></div>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed tincidunt sem, quis cursus dolor. Duis a vestibulum dui. Morbi eleifend lacus non lectus viverra semper. Aliquam sit amet rutrum erat, vel tristique augue. Mauris massa leo, facilisis
    in fermentum in, gravida vel ligula. </p>
</div>

谢谢！

j08691

我给图标绝对的位置，并从标题中删除行内块显示：

.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示例

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。