CODEWITHSUNDEEP
htmlcss
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Horizontally Center Items using css

I wanted to centralize items horizontally. I have written below code for that

.member-list {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
  width: 100%;
}

.member-list li {
  margin: 10px 0 30px;
  display: inline-block;
  height: 260px;
  text-align: center;
  cursor: pointer;
  width: 20%;
}

.member-list li a {
  display: block;
}

.member-img {
  width: 180px;
  height: 180px;
  overflow: hidden;
  background: -webkit-radial-gradient(circle, #0b8cac, #056881);
  background: -o-radial-gradient(circle, #0b8cac, #056881);
  background: -moz-radial-gradient(circle, #0b8cac, #056881);
  background: radial-gradient(circle, #0b8cac, #056881);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.member-img img {
  width: 100%;
  height: 100%;
}

.member-desc {
  color: #666;
  padding: 10px 0;
  height: 100px;
}
<ul class="member-list">
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p></p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
</ul>

I above code if I remove sub description of image then that block goes down. What should I do to solve this issue. I wanted to center all items horizontally. Here is fiddle example of my code.example Please help.

Upvotes: 0

Views: 111

Answers (3)

ankita patel
ankita patel

Reputation: 4251

Give only vertical-align:middle to .member-list li class.

.member-list {
    padding: 0;
    margin: 0;
    text-align: center;
    list-style: none;
    width: 100%;
}
.member-list li {
    margin: 10px 0 30px;
    display:inline-block;
    height: 260px;
    text-align: center;
    cursor: pointer;
    width:20%;
    vertical-align: middle;
}
.member-list li a {
    display: block;
}
.member-img {
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: -webkit-radial-gradient(circle, #0b8cac, #056881);
    background: -o-radial-gradient(circle, #0b8cac, #056881);
    background: -moz-radial-gradient(circle, #0b8cac, #056881);
    background: radial-gradient(circle, #0b8cac, #056881);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}
.member-img img{width:100%;height:100%;}
.member-desc {
    color: #666;
    padding: 10px 0;
    height: 100px;
}
<ul class="member-list">
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p></p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
  <li> 					
    <a href="#member1"> 						
      <div class="member-img"> 							
          <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#"> 									
      </div> 						
      <div class="member-desc"> 							
      <p>Lorem ipsum</p> 							
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p> 		
      </div> 					
    </a> 				
  </li>
</ul>

Upvotes: 1

felixmosh
felixmosh

Reputation: 35503

You can use display: flex on the ul in-order to align all the items.

.member-list {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.member-list li {
  margin: 10px 0 30px;
  display: inline-block;
  height: 260px;
  text-align: center;
  cursor: pointer;
  width: 20%;
}

.member-list li a {
  display: block;
}

.member-img {
  width: 180px;
  height: 180px;
  overflow: hidden;
  background: -webkit-radial-gradient(circle, #0b8cac, #056881);
  background: -o-radial-gradient(circle, #0b8cac, #056881);
  background: -moz-radial-gradient(circle, #0b8cac, #056881);
  background: radial-gradient(circle, #0b8cac, #056881);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.member-img img {
  width: 100%;
  height: 100%;
}

.member-desc {
  color: #666;
  padding: 10px 0;
  height: 100px;
}
<ul class="member-list">
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p></p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
</ul>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

One way to solve this is to use display:flex on ul so all the li have the same height and are aligned

See snippet below

.member-list {
  padding: 0;
  margin: 0;
  text-align: center;
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.member-list li {
  margin: 10px 0 30px;
  display: inline-block;
  height: 260px;
  text-align: center;
  cursor: pointer;
  width: 20%;
}

.member-list li a {
  display: block;
}

.member-img {
  width: 180px;
  height: 180px;
  overflow: hidden;
  background: -webkit-radial-gradient(circle, #0b8cac, #056881);
  background: -o-radial-gradient(circle, #0b8cac, #056881);
  background: -moz-radial-gradient(circle, #0b8cac, #056881);
  background: radial-gradient(circle, #0b8cac, #056881);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.member-img img {
  width: 100%;
  height: 100%;
}

.member-desc {
  color: #666;
  padding: 10px 0;
  height: 100px;
}
<ul class="member-list">
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p></p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
  <li>
    <a href="#member1">
      <div class="member-img">
        <img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
      </div>
      <div class="member-desc">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </a>
  </li>
</ul>

Upvotes: 0

Related Questions