Web筋トレも使っているサーバー!ロリポップを使ってみない?

flexboxで画像サイズが違う時に中央で揃える方法

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

コメントを残す

メールアドレスが公開されることはありません。