使用css水平居中项目

时间：2017-11-24 08:21:34

标签： html css css3

我想横向集中项目。我已经写了下面的代码

.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>

我上面的代码，如果我删除图像的子描述然后该块下降。我该怎么做才能解决这个问题。我想水平居中所有物品。这是我的代码的小提琴示例。example 请帮忙。

3 个答案:

答案 0 :(得分：1)

您可以使用ul上的显示：flex按顺序对齐所有项目。

.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>

答案 1 :(得分：1)

仅将vertical-align:middle提供给.member-list li课程。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

解决此问题的一种方法是在display:flex上使用ul，以便所有li具有相同的高度并对齐

请参阅下面的代码段

.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>

相关问题
最新问题