Sponser Link
画像サイズが異なる時に中央で揃える方法です。
See the Pen
画像サイズが違う時に中央で揃える方法 by studio-0 (@studio-0)
on CodePen.
Sponser Link
HTML
<ul class="p_item-list__list column-3"> <li class="p_item-list__item p_item-unit"> <a class="p_item-unit__link c_reset c_blocklink c_hover-pop" href="https://ecnavi.jp/ad/10015211/show/?frame=search"> <p class="p_item-unit__image-wrapper"> <img class="p_item-unit__image" src="https://ecnavi.jp/web_sync/common/5ef02194e197e.png" alt=""> </p> <p class="p_item-unit__name">楽天デリバリー</p> <p class="p_item-unit__condition">購入</p> <p class="p_item-unit__point"> <span class="p_item-unit__regular-point c_point_rate c_x_large">0.6</span> </p> </a> </li> <li class="p_item-list__item p_item-unit"> <a class="p_item-unit__link c_reset c_blocklink c_hover-pop" href="https://ecnavi.jp/ad/161888/show/?frame=search"> <p class="p_item-unit__image-wrapper"> <img class="p_item-unit__image" src="https://tmzx4adk6c.user-space.cdn.idcfcloud.net/static/images/site/23950.gif?1531925641" alt=""> </p> <p class="p_item-unit__name">楽天toto会員登録</p> <p class="p_item-unit__condition">無料会員登録</p> <p class="p_item-unit__point"> <span class="p_item-unit__regular-point c_point c_x_large">315</span> </p> </a> </li> <li class="p_item-list__item p_item-unit"> <a class="p_item-unit__link c_reset c_blocklink c_hover-pop" href="https://ecnavi.jp/ad/161160/show/?frame=search"> <p class="p_item-unit__image-wrapper"> <img class="p_item-unit__image" src="https://img.mobadme.jp/restimgs/mobadme/banner/00/30/300_1.jpg?mid=102223" alt=""> </p> <p class="p_item-unit__name">楽天プレミアムカード</p> <p class="p_item-unit__condition">カード発行</p> <p class="p_item-unit__point"> <span class="p_item-unit__regular-point c_point c_x_large">2,286</span> </p> </a> </li> </ul> Resources
Sponser Link
CSS
.p_item-list__list { display: flex; flex-wrap: wrap; background-color: #fff; border-left: solid 1px var(--c-border-color); } .column-1>.p_item-unit:nth-child(-n+1), .column-2>.p_item-unit:nth-child(-n+2), .column-3>.p_item-unit:nth-child(-n+3), .column-4>.p_item-unit:nth-child(-n+4), .column-5>.p_item-unit:nth-child(-n+5) { margin-top: 0; } .column-3>.p_item-unit { width: 33.333%; } .p_item-unit { display: flex; box-sizing: border-box; overflow: hidden; margin-top: -1px; border-top: solid 1px #e5e5e5; border-bottom: solid 1px #e5e5e5; border-right: solid 1px #e5e5e5; text-align: center; } .p_item-unit__link { display: flex; flex-direction: column; position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; overflow: hidden; } .c_blocklink { transition: all .2s linear; } .c_reset { border: 0; border-radius: 0; background-color: transparent; text-decoration: inherit; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; } .p_item-unit__image-wrapper { display: flex; justify-content: center; align-items: center; margin: auto; height: 140px; } .p_item-unit__image { background-color: #fff; max-width: 140px; max-height: 140px; } .p_item-unit__name { font-weight: bold; font-size: 14px; line-height: 1.5; min-height: 3em; margin-top: 15px; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .p_item-unit__condition { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .c_point, .c_point_rate { color: #d10000; font-family: "Roboto",Verdana,sans-serif; font-weight: 900; line-height: 1; letter-spacing: -0.02em; vertical-align: -0.04em; } .c_point.c_x_large, .c_point_rate.c_x_large, .c_x_large .c_point, .c_x_large .c_point_rate { font-size: 28px; } @media screen and (max-width: 767px) { .p_item-list__list { display: block; list-style-type: none; } .column-3>.p_item-unit { width:100%; } li { display: list-item; text-align: -webkit-match-parent; } .p_item-unit:first-child { border-top: solid 1px #e5e5e5; } .p_item-unit { border-bottom: solid 1px #e5e5e5; } .p_item-unit__link { display: block; position: relative; box-sizing: border-box; min-height: 110px; padding: 10px 10px 10px 110px; overflow: hidden; } .p_item-unit__image-wrapper { position: absolute; left: 0; right: calc(100% - 110px); top: 0; margin: auto; height: 100%; display: flex; justify-content: center; align-items: center; } .p_item-unit__image { background-color: #fff; max-width: 90px; max-height: 90px; } .p_item-unit__name { font-weight: bold; font-size: 14px; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align:left; min-height:0; } .p_item-unit__condition { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align:left; } .p_item-unit__point { margin-top: 5px; text-align: right; } } Resources
Sponser Link