bugfix> css > 投稿

アイソトープを使用して、Squarespaceでフィルター可能なギャラリーを作成しています。すべてが完璧に機能していますが、個々の画像を列の中央に配置することはできません。どんな助けも素晴らしいでしょう!

各画像のソースは以下のようになり、スタイル設定の後にリストされます:

<ul class="list">
<li class="list__item cloud connectivity ucaas"><img src="*static url here"/></li> </ul>

ul {
margin-bottom: 1em;
margin: auto;
list-style: none;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: space-between;
}
ul li {
flex: 0 0 auto;
text-align: center;
}
.list { 
margin: 0; 
padding: 0; 
list-style: none; 
}
.list__item {
display: inline-block; 
width: 100%; 
height: 12em;
overflow: hidden;
margin-bottom: 1em;
margin: auto;
text-align: center;
font-size: 1em; 
text-transform: uppercase;
color: white;
}
@media screen and (min-width: 600px) {
.list {
    display: flex;
    flex-wrap: wrap;
  margin: auto;
}
.list__item {
    width: calc(33% - 1em);  
}
@media screen and (min-width: 768px) {
button {
    margin: 0.5em; 
    padding: 0.5em; 
}
.list__item {                               
    width: calc(33% - 1em); 
}
}

回答 1 件
  • <ul class="list">
      <li class="list__item cloud connectivity ucaas">
      <div class="cont">
      <img src="http://www.pdfontanaliri.it/wp-content/uploads/2018/01/casa.jpg"/></div></li>
      <li class="list__item cloud connectivity ucaas">
      <div class="cont">
      <img src="http://www.pdfontanaliri.it/wp-content/uploads/2018/01/casa.jpg"/></div></li>
    </ul>
    
    
    .list__item {
    width: 100%; 
    height: 12em;
    overflow: hidden;
    margin-bottom: 1em;
    margin: auto;
    text-align: center;
    font-size: 1em; 
    text-transform: uppercase;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .cont {
      height: 50%;
      width: 50%;
      margin: 5px;
      border: 1px solid yellow;
    }
    
    

あなたの答え