1
私は別のdivの中にdivを持っていて、私が達成したいと思っていた効果は、隣にあるクラシックな3つの製品のアイコンです。Div div絶対位置と負のマージンの内容が重複
テキストdivのコンテンツは、次のコンテンツをプッシュダウンして重複することはありません。私は多くの異なるソリューションを試しましたが、私はこの場合に動作するものは見つかりませんでした。
私は内部のdivの絶対的な位置と負のマージンがそれをより困難にするのではないかと恐れています。
私はどんな提案もありがとう。ありがとう！
HTML
<div class="icon-group">
<div class="icon">
<i class="fa fa-book fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-plane fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
<div class="icon">
<i class="fa fa-quote-right fa-4x" aria-hidden="true"></i>
<div class="icon-caption">Astonishment tendrils of gossamer clouds the carbon in our apple pies made in the interiors of collapsing stars.</div>
</div>
</div>
<div class="clear"></div>
<h3 class="after-icons">What people say about me</h3>
CSS
.icon-group, icon-caption-group {
height: 100px; display: table; width:100%; table-layout: fixed}
.icon, .icon-caption {
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;}
.icon-caption {
border-bottom: 3px solid #E8EAF6;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
margin: -15% 0 0 -25%;
margin-top: 20%;
}
.after-icons {
margin-top: 30px
}