Question

我想将h4和p上方的文本图标居中。我认为这不会是一个问题，但我已经尝试了一切，文本图标仍然停留在左侧而不是居中。我用margin，text-align或vertical-align做的所有事情似乎只是在它的背景中移动图标。我已经使用了jsFiddle，这里是代码jic：

HTML：

<div id="contentCon1">
    <section class="textIcon large">
        <a href="">
            <i class="i-large icon-text-width"></i>
            <h4>Lorem Ipsum</h4>
            <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et tortor consequat, facilisis tortor ut, tempus purus. Duis porta dui turpis, ac blandit augue rhoncus a. </p>
            </div>
        </a>
    </section>
</div>

CSS：

#contentCon1 {
  clear: both;
  float: left;
  margin-left: 0;
  width: 35%;
  display: block;
  text-align: center;
}
a {
  text-decoration:none;
}
.textIcon > h4, .textIcon > a > h4 {
  font-size:16px;
  line-height:20px;
  font-weight:bold;
  color:#3B3B3B;
  margin:25px 0 0 0;
}
.textIcon > div {
  margin-top:15px
}
.textIcon > a {
  display:block;
}
.textIcon > a:hover > h4 {
  color:#F15A2B;
}

.textIcon.large {
  position:relative;
  border-bottom:1px solid #E9E9E9;
  padding-bottom:50px;
  margin-bottom: 20px;
}
.textIcon.large > i, .textIcon.large > a > i {
  float:none;
  margin:0;
}.textIcon.large > a:hover  p {
  color:#6b6b6b;
}
.textIcon.large:hover {
  border-bottom:1px solid #F15A2B;
}
.textIcon.large > a:hover > i {
  color:#FFF;
  background:#F15A2B;
}

@font-face {
  font-family: 'fontello';
  src: url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.eot?11956569');
  src: url('http://mtctinc.com/styles/fonts/fontello.eot?11956569#iefix') format('embedded-opentype'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.woff?11956569') format('woff'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.ttf?11956569') format('truetype'),
       url('http://mtctinc.com/twBootstrap/styles/fonts/fontello.svg?11956569#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none; 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
} 
.icon-text-width:before { 
    content: '\e801';
} /* '' */

i.i-large {
  width:75px;
  height:75px;
  background:#EEE;
  border-radius:48px;
  color:#999;
  display:table-cell;
  vertical-align:middle;
  float:none;
  margin:-5px 0px 10px 0px;
  text-align:center;
  font-size:38px;
  cursor:default;
}

Answer 1

鉴于text-align:center位于父元素上，您只需将图标的显示从table-cell更改为inline-block。

Updated Example Here

i.i-large {
    display:inline-block;
}

Answer 2

插入CSS

i.icon-text-width {
    display: inline-block;
}

将文本图标置于包含div内部

2 个答案: