Bootstrap：将列居中排列在流体行
（2015年9月30日）此问题的解决方案已添加到底部
我一直在搜索和播放CSS文件，但我似乎无法正确地理解这一点，相反，我只是用不好的解决方案修补css。
当前设置
我有一行<div class="row-fluid">，此行有24列div <div class="col-xs-1 skills-item">。我在桌面上看起来很好，但是当我在移动设备上时，他们会移动并设置丑陋的居中位置。
我想使用row-fluid选项，因为我不想要24列堆叠并占用太多空间。
请参阅下面的图片。
全屏
较小的屏幕
更小的屏幕
移动
我做了什么
我添加了媒体查询以处理不同的屏幕尺寸，但我确定这是一种硬编码方式，我应尽可能避免。这是片段
@media(max-width:1000px) {
#skills .skills-item {
margin-right: 30px;
}
}
@media(min-width: 1001px) and (max-width: 1200px){
#skills .skills-item {
margin-right: 30px;
margin-left: 5px;
}
}
@media(max-width: 767px) {
#skills .skills-item {
margin-right: 55px;
margin-left: 15px;
}
}
@media(max-width: 466px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 40px;
}
}
@media(max-width: 376px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 30px;
}
}
我的意思是这个有效，但在某些尺寸上看起来仍然很难看。
问题
是否有任何干净的解决方案使这些列居中？
像margin: 0 auto;之类的东西，以及所有这些都是完美的，但它没有用。 （或者我可能无法找到放置的地方）
我制作的网站已在网上进行测试（根本没有完成）Here
谢谢！
编辑：添加了html和css
本节的HTML code 。我很确定你不需要所有24件物品，但在这里。
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
CSS部分
/* Skill Settings */
.skill-name {
color: #fff;
display: none;
}
.skills-link:hover .skill-name {
display: table;
margin: 0 auto;
}
.skills-link:hover .two-lines {
margin-top: -5px;
}
.skills-link:hover .icon-one-line {
padding-top: 5px;
}
.skills-link:hover .skill-icon{
display: none;
}
#skills .skills-item {
right: 0;
margin-top: 15px;
}
#skills .skills-item .skills-link {
display: block;
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
background-color: #0F1A23;
text-align: center;
padding-top: 25px;
}
#skills .skills-link:hover {
background-color: #000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills .skill-love:hover {
background-color: #FF0000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills * {
z-index: 2;
}
@media(max-width:1000px) {
#skills .skills-item {
margin-right: 30px;
}
}
@media(min-width: 1001px) and (max-width: 1200px){
#skills .skills-item {
margin-right: 30px;
margin-left: 5px;
}
}
@media(max-width: 767px) {
#skills .skills-item {
margin-right: 55px;
margin-left: 15px;
}
}
@media(max-width: 466px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 40px;
}
}
@media(max-width: 376px) {
#skills .skills-item {
margin-right: 40px;
margin-left: 30px;
}
}
/* End Skill Settings */
解决方案
的index.html
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<!-- notice that I changed it from row-fluid to row-->
<!-- also I changed each columns from col-xs-1 to col-sm-1 -->
<div class="row">
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-sm-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
stylesheet.css中
/* Skill Settings */
.skill-name {
color: #fff;
display: none;
}
.skills-link:hover .skill-name {
display: table;
margin: 0 auto;
}
.skills-link:hover .two-lines {
margin-top: -5px;
}
.skills-link:hover .icon-one-line {
padding-top: 5px;
}
.skills-link:hover .skill-icon {
display: none;
}
#skills {
text-align: center;
}
#skills .skills-item {
right: 0;
margin-top: 0px;
display: inline-block;
width: 95px;
height:95px;
overflow: hidden;
}
#skills .skills-item .skills-link {
display: block;
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
background-color: #0F1A23;
text-align: center;
padding-top: 25px;
box-sizing: border-box;
}
#skills .skills-link:hover {
background-color: #000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills .skill-love:hover {
background-color: #FF0000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills * {
z-index: 2;
}
.col-sm-1 {
padding: 0;
}
/* End Skill Settings */
截图
2 个答案:
答案 0 :(得分：1)
您的div框中没有一个实际位于其行容器中。
换句话说，每个<div class="col-xs-1 skills-item">都在<div class="row-fluid">之外，这是一个折叠框，因为每个div都是hvr-float-shadow类的绝对位置。
如果你在.row-fluid附近放置一个边框，你会发现它只是方框上方的一条平线。
有几种方法可以“清除”问题。您可以尝试将overflow: hidden添加到容器类（.row-fluid），作为一种方法。该行现在扩展为包装所有框。
然后为了保持盒子居中，我建议每个盒子inline-block。
.col-xs-1 skills-item { display: inline-block; }
并将text-align: center;应用于父容器：
.row-fluid { text-align: center; }
这应该使框在所有屏幕尺寸中居中。只需确保删除已添加的所有边距补丁。
答案 1 :(得分：1)
以下是根据您的代码修改的工作解决方案。
CSS
/* Skill Settings */
.skill-name {
color: #fff;
display: none;
}
.skills-link:hover .skill-name {
display: table;
margin: 0 auto;
}
.skills-link:hover .two-lines {
margin-top: -5px;
}
.skills-link:hover .icon-one-line {
padding-top: 5px;
}
.skills-link:hover .skill-icon{
display: none;
}
#skills{
text-align: center;
}
#skills .skills-item {
right: 0;
margin-top: 0px;
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
}
#skills .skills-item .skills-link {
display: block;
position: relative;
margin: 0 auto;
width: 80px;
height: 80px;
background-color: #0F1A23;
text-align: center;
padding-top: 25px;
box-sizing: border-box;
}
#skills .skills-link:hover {
background-color: #000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills .skill-love:hover {
background-color: #FF0000;
-webkit-transition: all ease 1.25s;
-moz-transition: all ease 1.25s;
transition: all ease 1.25s;
}
#skills * {
z-index: 2;
}
/* End Skill Settings */
HTML
<!-- Skill Overview -->
<section class="success" id="skills">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Skill Overview</h2>
<hr class="skills-hr">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
<span class="skill-name" style="font-size:150%;">JAVA</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
<span class="skill-name" style="font-size:150%;">C</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
<span class="skill-name" style="font-size:150%;">C++</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
<span class="skill-name" style="font-size:150%;">C#</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">PYTHON</span>
<span class="skill-name">PYTHON</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="color:#fff;">SPARC</span>
<span class="skill-name two-lines" style="font-size:90%">SPARC ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link" style="padding-top:30px">
<span class="skill-icon" style="font-size:120%; color:#fff;">MIPS</span>
<span class="skill-name two-lines" style="font-size:90%">MIPS ASSEMBLY</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-android fa-2x"></i>
<span class="skill-name icon-one-line">ANDROID</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-html5 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">HTML5</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-css3 fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">CSS3</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<span class="skill-icon" style="font-size:150%; color:#fff;">JS</span>
<span class="skill-name icon-one-line" style="font-size:90%">JAVASCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="php" class="skill-icon" src="images/php-logo.png" style="width:80%; margin-top:-10px">
<span class="skill-name">PHP SCRIPT</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="apache" class="skill-icon" src="images/apache-logo.png" style="width:75%;">
<span class="skill-name">APACHE SERVER</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-database fa-2x"></i>
<span class="skill-name" style="font-size:90%">SQL DATABASE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="aws" class="skill-icon" src="images/aws-logo.png" style="width:50%;">
<span class="skill-name" style="font-size:85%">Amazon Web Services</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-linux fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">LINUX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-apple fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:120%;">OSX</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-windows fa-2x"></i>
<span class="skill-name icon-one-line" style="font-size:90%;">WINDOWS</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-git fa-2x"></i>
<span class="skill-name" style="font-size:75%">VERSION CONTROL <br>(GIT, SVN)</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="eclipse" class="skill-icon" src="images/eclipse-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">ECLIPSE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="unity3d" class="skill-icon" src="images/unity3d-logo.png" style="width:40%;">
<span class="skill-name icon-one-line">UNITY3D</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<img alt="gdb" class="skill-icon" src="images/gdb-logo.png" style="width:70%; margin-top:-15px">
<span class="skill-name icon-one-line" style="font-size:120%;">GDB</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-float-shadow skills-link">
<i class="skill-icon fa fa-stack-exchange fa-2x"></i>
<span class="skill-name two-lines" style="font-size:90%;">STACK EXCHANGE</span>
</div>
</div>
<div class="col-xs-1 skills-item">
<div class="hvr-pulse-grow skills-link skill-love">
<i class="skill-icon fa fa-heart fa-2x"></i>
<span class="skill-name icon-one-line" style="color: #000; font-size: 120%"><b>LOVE</b></span>
</div>
</div>
</div>
</div>
</section>
<!-- /Skill Overview -->
https://jsfiddle.net/or10qmkk/
你设置的方式存在一些问题，例如你的链接因填充而疯狂，因为你从未设置过边框，所以你的高度是多变的。从那里我将.skills-item设置为内联块，然后将#skills div设置为text-align center以使它们居中。
如果您有疑问，请在评论中告诉我。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？