Having trouble horizontally centering div within another div

Question

I'm trying to have the div with id "team" be horizontally centered inside of its parent div, but it looks like the picture below. I thought that having margin-left and margin-right being 50% would do the trick, but that doesn't seem to be the case. What am I doing wrong?

HTML:

<div id="clients">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Get To Know Us</h2>
                    <div id="team">
                        <ul>
                          <li><img src="images/randy.jpg" class="img-responsive" alt=""/>Randy Flug</li>
                          <li><img src="images/alec.jpg" class="img-responsive" alt=""/>Alec Tuckey</li>
                       </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>

Relevant CSS:

#clients {
    padding: 40px 0;
    background: #333;
}

#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
}

#clients ul {
    padding: 0px 0px;
    margin: 0 -25px;
}

#clients ul li {
    float: left;
    margin: 0;
    list-style: none;
    width: 20%;
    position: relative;
    overflow: hidden;
    padding: 0 15px;
}

#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

.shots .col-md-12 {
    max-width: 90%;
    margin: 0 auto;
    float: none;
}

#team{
    text-align: center;
    margin-left: 50%;
    margin-right: 50%;
    width: 100rem;
    text-decoration-color: white;
    color: white;
}

what is the responsive css, ie for `img-responsive`? *Edit* it makes no sense for #team to have margins either side of 50% `margin-left: 50%; margin-right: 50%;` - plus a width as well. Are there console log errors for this? — Mousey, Aug 01 '15 at 23:08
What if you were to set both `margin-left` and `margin-right` to `auto`? Instead of `50%`. — TheOnlyError, Aug 01 '15 at 23:09
Created this from your code - http://jsfiddle.net/mty1nvm9/ - can you add any other css in, since this centers the images despite the margin width mistakes — Mousey, Aug 01 '15 at 23:16
consider simple and easy centering with flexbox: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Dec 24 '15 at 14:08

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Is this what you wanted? DEMO

CSS

html { box-sizing: border-box; font: 16px/1.45 Consolas; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0; }
#clients {
    background: #333;
}
#clients h2 {
    color: #efefef;
}
#clients h3 {
    margin: 0px 0px 30px;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    color: #efefef;
}
#clients ul {
    padding: 0px 0px;
}
#clients ul li {
    margin: 0;
    list-style: none;
    display: table-cell;
}
#clients ul li img {
    opacity: 0.2;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    margin: 5px;
    flex: 1 0 200px;
    align-self: center;
}
#clients ul li:hover img {
    opacity: 1;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.row {
    display: table-row;
}
#team {
    text-align: center;
    width: 90vw;
    height: 100%;
    text-decoration-color: #AAA;
    color: #DDD;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    align-items: center;
}

Having trouble horizontally centering div within another div

1 Answers1

CSS