0
我很努力地讓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;
}