Адаптивная верстка каталога. Как установить кнопку внутри блока внизу по центру?

Question

Адаптивная верстка каталога. Как установить кнопку внутри блока внизу по центру?

Рейтинг: 0Ответов: 1Опубликовано: 01.02.2023

    const OurMenu = () => {
    
  return (
    <div className='menu'>
        <h1 className="menuTitle">Our Menu</h1>
        <div className="menuList">
            {MenuList.map((item, key) => {
                return <div className="menuItem">
                    <div>
                        <img src={item.image} alt="smth wrong!"  />
                        <h4>{item.name}</h4>
                        <p>{item.price} $</p>
                        <p className='promo'>{item.promo_price}$</p>
                        <h4>{item.description}</h4>
                        <button className='addToOrder'>Add to Order</button>
                    </div>
                </div>
            })}
        </div>
        </div>
  )
}

// Css файл:

    .menu {
    width: 100%;
    height: 150vh;
    text-align: center;
    background: #D2691E;
    padding: 20px;

}
.menuTitle {
    font-size: 35px;

}
.menuList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.menuItem {
    width: 400px;
    background-color: aliceblue;
    opacity: 0.9;
    margin: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    cursor: pointer;
    transition:  .3s;
}
.menuItem:hover {
    transform: scale(1.05);
    opacity: .9;
}
.menuItem img {
    width: 100%;
    height: 250px;
}
.menuItem h4 {
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 2px;
}
.menuItem p {
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 2px;
    text-decoration: line-through;
}
.menuItem .promo {
    font-size: 28px;
    margin-top: 10px;
    letter-spacing: 2px;
    color: red;
    text-decoration: none;
}
.menuItem .addToOrder {
  left: 0;
  top: 10px;
  position: relative;
    background-color: black;
    color: #D2691E;
    font-weight: 800;
    text-align: center;
}

Как в этой ситуации сверстать чтобы у всех карточек menuItem кнопка находилась строго внизу по центру и не меняла местоположение на разных размерах экрана?

reactjs css3 вёрстка позиционирование

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Как-то так 2 варианта

.wrapper {
  position: relative;
  border: 1px solid #000;
  padding: 5px 5px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrapper button {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  width: max-content;
  margin: 0 auto;
}
.wrapper2 {
  padding: 5px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

<h2>Способ №1</h2>

<div class="wrapper">
  <img src={item.image} alt="smth wrong!"  />
  <h4>{item.name}</h4>
  <p>{item.price} $</p>
  <p className='promo'>{item.promo_price}$</p>
  <h4>{item.description}</h4>
  <button className='addToOrder'>Add to Order</button>
</div>

<h2>Способ №2</h2>

<div class="wrapper2">
  <div class="top">
    <img src={item.image} alt="smth wrong!"  />
    <h4>{item.name}</h4>
    <p>{item.price} $</p>
    <p className='promo'>{item.promo_price}$</p>
    <h4>{item.description}</h4>
  </div>
  <div class="bottom">
    <button className='addToOrder'>Add to Order</button>
  </div>
</div>

Адаптивная верстка каталога. Как установить кнопку внутри блока внизу по центру?

Ответы