Search code examples
htmlcsstwitter-bootstrapcenter

Why won't this div just center?

I have been trying to center the very bottom row of blue cards. As you can see it is not:

enter image description here

So far I have tried text-align, width: 100%;, and margin-left: auto; margin right: auto;

But it will just not center! Is there something I am obviously executing poorly/wrong?

HTML:

<!-------------------     SKILLS     --------------------->

        <section>
            <div class="container-fluid skillset">

                <div class="row">
                    <div class="col-xs-12">
                        <h3>Skills</h3>
                    </div>
                </div>


            <div class="row lang">

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-html5" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-css3" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-twitter" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="card card-outline-primary text-xs-center">
                        <div class="card-block">
                            <blockquote class="card-blockquote">
                                <p><i class="fa fa-database" aria-hidden="true"></i></p>
                            </blockquote>
                        </div>
                    </div>
                </div>

            </div>

</div>

</section>

CSS:

/* -------------------------------------
SKILLS
--------------------------------------*/

.card {
    width: 100px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; /* 5px rounded corners */
   /* margin-left: 30%; */
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
    border-radius: 5px 5px 0 0;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
}

.lang {
    text-align: center;
}
Solution

  • Try to make .card an inline-block (display: inline-block) and use text-align: center on its parent/s. You might want to give those parent col-md-3 elements a dedicated class for this purpose.