0
私は両方の画像とテキストを水平に正しく整列させるためにdivを得るのに苦労しています。テキストなし。すべてが必要なように機能します。しかし、私はすべてが壊れた物にテキストを追加する瞬間です。提案は大歓迎であり、感謝しています。この投稿の書式設定が不適切な場合は、お詫び申し上げます。ここでは比較的新しい。Divとテキストと画像をデスクトップとモバイルで整列する。マウスオーバー効果を維持しながら
HTML：
<div id="icon-container">
<div id="icon"><img class="hover-icon1"
src="/Portals/0/Images/NewSite/comp.png?ver=2017-05-26-102442-467"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon2"
src="/Portals/0/Images/NewSite/phone.png?ver=2017-05-26-102445-013"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon3"
src="/Portals/0/Images/NewSite/email.png?ver=2017-05-26-102444-373"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon4"
src="/Portals/0/Images/NewSite/alert.png?ver=2017-05-26-102443-217"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon5"
src="/Portals/0/Images/NewSite/backup.png?ver=2017-05-26-102443-747"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
<div id="icon"><img class="hover-icon6"
src="/Portals/0/Images/NewSite/web.png?ver=2017-05-26-102445-577"/>
</br>
<h4 class="icon-text">Content here</h4>
</div>
</div>
はCSS：
/* CSS For Icons */
#icon-container {
width:100%;
}
#icon {
width:16.66%;
height: 200px;
display:inline-block;
margin-right: -4px;
box-sizing: border-box;
padding: 1%;
text-align: center;
}
@media all and (max-width:800px)
{
#icon
{
display: table;
margin: 0 auto;
height: 100px;
text-align: center;
}
}
img.hover-icon1, img.hover-icon2, img.hover-icon3, img.hover-icon4,
img.hover-icon5, img.hover-icon6 {
margin:20px;
padding:3px;
float:left;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-color: #1356d1
}
img.hover-icon1:hover, img.hover-icon2:hover, img.hover-icon3:hover,
img.hover-icon4:hover, img.hover-icon5:hover, img.hover-icon6:hover {
cursor:pointer;
margin-top: 5px;
}
h4.icon-text {
clear: left;
display: block;
}