アイソトープを使用して、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 件
関連記事
- SQLServerで日付列順に並べられたグループ内の列をランク付けする方法
- データフレーム内のデータフレーム:新しいcolumn_を作成するには
- Rのdataframesのリスト内で1つのdataframeの指定された列を使用します
- レスポンシブ列の画像にカーソルを合わせると、テキストを表示するにはどうすればよいですか?
- Rの列名を持つループ内でループする
- Excel内の各列(情報を含む)でコードを実行するにはどうすればよいですか?
- 別のデータフレームの列内のコンテンツを使用して、あるパンダデータフレームの列内の部分文字列を検索してからマージする
- 列に要素のリストが含まれている場合は、グループ内のサブセット
- pandas groupbyトランスフォーム内の列名にアクセスすることは可能ですか?
- Flutterの列ウィジェット内で行ウィジェットを非表示にする方法
関連した質問
- モバイルビューでの要素間に垂直方向の間隔を追加するにはどうすればよいですか?
- 高さ100%のフレックスグローの子はSafariで高さがゼロです
- css:親の数のパリティに応じてすべての要素を選択します(CSS以下、JSなし)
- スターバックスのウェブサイトを再作成すると、テキストと画像を同じ行に表示できません
- 画面が縮小しても一方が縮小せず、もう一方が縮小するように、2つのボックスを並べて作成するにはどうすればよいですか?
- ボックス内のテキストをレスポンシブにする方法は?
- column-countおよびcolumn-ruleの使用中の列のパディング
- ネストされたフレックスボックスに収まるように要素を縮小します
- フレックスコンテナのサイズを変更するときに、キャンバスを含むdivを縮小するにはどうすればよいですか?
- 大きな画像を含むフレックスボックスコンテナを50/50に保つにはどうすればよいですか?