twitter-bootstrap - Bootstrap : centering the columns in fluid row

转载作者：太空宇宙更新时间：2023-11-04 02:52:12

(09/30/2015) 在底部添加了此问题的解决方案

我一直在搜索和使用 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 代码。我很确定您不需要所有 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 -->

样式表.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 */

截图

最佳答案

这是根据您的代码修改的有效解决方案。

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 设置为内联 block ，并将 #skills div 设置为 text-align center 以使它们居中。

如果您有任何问题，请在评论中告诉我。

关于twitter-bootstrap - Bootstrap : centering the columns in fluid row，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32792398/

文章推荐： python - 如何在 python 中使用循环创建多个目录？

文章推荐： c++ - 一次将代码添加到 iOS/objective-C 项目和 c++ 库？

文章推荐： c - 如何使用 Doxygen 记录指向函数指针 vector 的指针

css - 使用flexbox对齐2个div : one center-center and the other bottom center
这个问题在这里已经有了答案: Flexbox: Align between bottom and center? [duplicate] (2 个答案) 关闭 6 年前。我正在尝试使用 flexb
html - 是还是？
用于居中元素的标签是或 ? 我知道或标签不再使用，但哪一个是正确的？我很迷惑。 Visual Studio 代码说错了，但只有适用于 Microsoft Edge。编辑:Microsof
game-center - Game Center 回合制自动匹配不工作
我使用的是标准匹配用户界面和两台 iPad iOS6。问题是当我在第一台设备中创建新的匹配项时，第二台设备应该在我查看匹配用户界面时看到现有的匹配项，但事实并非如此。我确定我的代码是正确的。这是方法:
java - setHorizontalAlignment(CENTER) - CENTER 无法解析为变量
在我的项目的两个不同的类(都扩展 JFrame)中，我尝试这样做: header = new JLabel("Header"); header.setHorizontalAlignme
jQuery - 视差效果 - 将背景位置更改为 "Center Center"
我已经在我的网站中实现了以下 jQuery 视差效果(取自 http://www.brandaiddesignco.com/insights/parallax-scrolling-made-easy/
css - 文本对齐 :center centers images too
每当我在我的 css 中居中文本时，它也会使图像居中。这是为什么？文本位于一个 div(“左”)内，图像位于第二个 div(“右”)内。这是 HTML - BANKS 还有
html - 没有怎么居中？
我现在有这段代码: 1 enE jk 5.6 mtE hp 6.4 hpE eb HML reE pm 514 hpE e
html - 我怎样才能让我的按钮居中，不起作用
我只是制作一个页面或类似的东西。我想让我的按钮居中，但它不起作用。我尝试用不同的方法将它居中，但它不起作用。看看代码。它有但它并没有将它置于整个页面的中心但只是喜欢......我不知道。照片:htt
css - 文本对齐 :center not centering text
我想知道如何将此页面中的字形居中，它们是使用@font-face 的图标字体，但即使在我将 text-align:center 应用于包含每个字形的 anchor 之后，它们也不是居中。它们显示为左
html - 有没有办法消除 "..."标签对特定元素的影响？
考虑以下 HTML 片段， Hyperlink 如上所示，由于“...”标签，所有内容都将居中对齐。但是，我不希望带有“id=three”的 HTML 元素的中心对齐
CSS 文本对齐 : center; is not centering things
我有以下 html: Site Map Privacy Policy Terms & Condi
安卓蜂窝 : Off-center button text - unable to center
我在将我正在处理的布局中的按钮上的文本居中时遇到问题。请查看下面的屏幕截图(在 eclipse 的“图形布局”选项卡中截取): 我不确定是什么原因造成的。我试着玩弄按钮的各个布局属性，但这没有任何效果
css - 有没有办法确保所有文本对齐 : center text is indeed centered?
我正在尝试使用 Bootstrap 组装页脚。由于某些原因，尽管确保应用了 text-align: center;，但页脚链接看起来略微偏离中心。有没有办法确保所有文本元素确实正确对齐？ HTML
css - Flexbox 对齐元素 :center not perfect in the center
我在使用 flexbox 工具 align-items:center; 时遇到了问题，它在中间并不完美，但文本、图标等的像素太高了……有人知道如何解决这个问题？ screenshot how it l
html - flex 对齐元素 : center not centering items
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
game-center - 以编程方式邀请 Game Center friend 参加比赛
GameKit 是否允许您以编程方式邀请特定的 Game Center friend 参加比赛，即不提供 GC ViewController？以下 handleInviteFromGameCenter
Android - 布局问题 - Textviews top center and bottom center
我有一个布局问题。假设我有一个 RelativeLayout 出现在我的屏幕底部。在此，我想添加 2 个 TextView ，一个在中心，一个在顶部中心，一个在底部中心。 |------------
安卓布局 : Center Text and Image View to screen center?
我有一个启动画面的 Activity layout.xml，它基本上显示了我想要的内容。但是如果我在更大或更小的屏幕设备上打开应用程序，它就不再居中了。有没有办法在元素周围放置一个包装器并将其在屏幕
javascript - 背景位置为 : center center without jump 的视差
尝试了几十种方法后，我自己也想不出解决方案 #banner .slide { position: static; top: 0px; left: 0px; z-inde
c++ - 避免过多的函数参数 : class-centered or function-centered approach?
您将如何修复以下传递过多参数的错误代码？ void helper1(int p1, int p3, int p5, int p7, int p9, int p10) { // ... } void

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城