Html 如何通过图标在表格上保留文字（响应性设计）

我正在写一篇关于学校的论文，但我面临一些问题。我们需要使我们的网站响应，虽然我们从来没有见过这个。。。这很难，在不使事情复杂化的情况下，我正试图使一张桌子反应灵敏。当我缩小屏幕尺寸时，我得到了以下信息：

我的朋友建议这样做，但图标彼此下方都是，我认为这是一个不好的解决办法：

---

所以首先要做的是。表是不响应的，这就是为什么在当今世界，开发人员不使用表，除非他们确实需要它们。而是使用

s

我在这里做的是把桌子拿下来，用

标签替换它们。 然后我给出了以下风格

.icon-div {
  display: inline-block; /* This makes the div line up and when it reaches the end of the viewport it will fall under the other */
  padding: 20px; /* Just for looks */
}

然后，您可以将其设置为中心样式和其他样式。

---

我还更改了您的

---

检查以下代码：

@导入url(https://fonts.googleapis.com/css?family=Fjalla+一),；
html，正文{
身高：100%；
宽度：100%；
溢出x：隐藏；
}
身体{
字体系列：“Fjalla One”，无衬线；
背景：#2C3E50；/*旧浏览器的回退*/
背景：-webkit线性渐变（到顶部，#4CA1AF，#2C3E50）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（到顶部，#4CA1AF，#2C3E50）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
背景重复：无重复；
}
.集装箱{
保证金：自动；
}
h1{
文本转换：大写；
字体大小：60px；
线高：47px；
字母间距：2px；
文本阴影：533d4a 1px 1px、#533d4a 2px 2px、#533d4a 3px 3px、#533d4a 4px 4px；
文本对齐：居中；
线高：60px；
}
.头衔{
变换：旋转（-5度）；
保证金：0自动；
显示：块；
}
.icon div{
显示：内联块；
填充：20px；
}
.图标{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：透视图（1px）translateZ（0）；
变换：透视图（1px）translateZ（0）；
长方体阴影：0 0 1px透明；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
-webkit转换属性：框阴影、变换；
过渡属性：框阴影、变换；
显示：表格单元格；
垂直对齐：中间对齐；
颜色：白色；
边界半径：35px；
宽度：180px；
高度：180像素；
文本对齐：居中；
/*背景：#007991；/*旧浏览器的回退*/
/*背景：-webkit线性渐变（至底部，#78ffd6，#007991）；/*Chrome 10-25，Safari 5.1-6*/
/*背景：线性渐变（至底部，#78ffd6，#007991）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
}
@仅介质屏幕和（最大宽度：500px）{
运输署{
浮动：左；
右边距：10px；
宽度：45%；
}
运输署：第n名儿童（3）{
清除：左；
}
.图标{
宽度：100%！重要；
身高：100%！重要；
边缘顶部：50px；
}
}
.图标：悬停，.图标：焦点，.图标：活动{
盒影：0 50px 50px-50px rgba（0,0,0,50）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.icontext{
文本对齐：居中；
颜色：白色；
字体大小：30px；
}
桌子{
边界间距：60px；
边界塌陷：分离；
}
.联系电话{
右边距：15px；
颜色：白色；
边框：2件纯黑；
边界半径：35px；
盒影：08px16px0rgba（0,0,0,0.2），012px40px0rgba（0,0,0,0.19）；
宽度：300px；
高度：50px；
文本对齐：居中；
证明内容：中心；
背景：#007991；/*旧浏览器的回退*/
背景：-webkit线性渐变（至底部，#78ffd6，#007991）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（至底部，#78ffd6，#007991）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
}

知识库


汉堡学校
阿夫斯普拉肯
阿夫斯普拉肯
情况
格伦森
分类

第一件事：非常感谢您对我的帮助。我真的很感激。谢谢分享这些信息，它让你的想法更加清晰。真的很感激，伙计@卢卡斯韦尔很高兴我能帮上忙。

.title{
  transform: /*translateX(-50%)*/ rotate(-5deg); /* Don't need to translate it when you can center it using margin */
  display: block;
  /*margin-left:50%; Took this out as well */
  margin: 0 auto; /* This is the trick to center things on the screen */
}