CODEWITHSUNDEEP
htmlcssflexbox
user3052443
user3052443

Reputation: 842

Can't center image in the second row

I have one row of three images. They are displaying equally spaced and centered as needed. But then I have a row beneath that of one image and I can't get it to move to align centered of the first row.

I've tried all of the suggestions I could find, like margin:0 auto; width:90%, but that image in the second row stays aligned left.

Would someone please point out my mistake? Here is the jsfiddle and here's the code I am using.

.banner_set {
  width: 100%;
  overflow: hidden
}

.nav-align {
  display: -webkit-flex;
  display: flex;
  -webkit-reorder-direction: row-reverse;
  width: 100%;
  height: auto;
  list-style: none;
}

.nav-items {
  /* width: 33%; */
  margin: 24px;
  flex: 1;
  /* NEW */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5)
}

.nav-items-wide {
  width: 100% margin: 0px;
}
<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items">
      <a href="http://www.example.com/b1">
        <img src="http://www.exampe.com/images/img1.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b2">
        <img src="images/img2.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b3">
        <img src="http://www.exampe.com/images/img3.jpg" class="img-responsive" width="80" height="40">
    </li>
  </ul>
</div>

<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items-wide">
      <a href="http://www.example.com/b4">
        <img src="http://www.exampe.com/images/img4.jpg" class="img-responsive" width="125" height="40"></a>
    </li>
  </ul>
</div>

Upvotes: 1

Views: 117

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Just add justify-content: center to .nav-align.

https://jsfiddle.net/60yqwufm/1/

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Add justify-content: space-around; or justify-content: center; for class nav-align.

.banner_set {
  width: 100%;
  overflow: hidden
}

.nav-align {
  display: -webkit-flex;
  display: flex;
  -webkit-reorder-direction: row-reverse;
  width: 100%;
  height: auto;
  list-style: none;
  justify-content: space-around;
}

.nav-items {
  /* width: 33%; */
  margin: 24px;
  flex: 1;
  /* NEW */
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5)
}

.nav-items-wide {
  width: 100% margin: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items">
      <a href="http://www.example.com/b1">
        <img src="http://www.exampe.com/images/img1.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b2">
        <img src="images/img2.jpg" class="img-responsive" width="80" height="40"></a>
    </li>
    <li class="nav-items">
      <a href="http://www.example.com/b3">
        <img src="http://www.exampe.com/images/img3.jpg" class="img-responsive" width="80" height="40">
    </li>
  </ul>
</div>

<div class="banner_set">
  <ul class="nav navbar-nav nav-align">
    <li class="nav-items-wide">
      <a href="http://www.example.com/b4">
        <img src="http://www.exampe.com/images/img4.jpg" class="img-responsive" width="125" height="40"></a>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions