HTML DIV 文本位置设置

Question

在尝试设置菜单时，我想知道这种设计的正确方法。--样式应如下所示---

已添加要显示的照片--

所以我在这里尝试了几个不同的选项，这是我在代码方面的智慧...我尝试使用多个 div，但是实现上述布局的最简单方法是什么？我可以将它置于这种格式的中心，但我无法将文本置于网格布局中的上述样式。

我的假设是我的 HTML 但我已经尝试过在自己的 DIV 中写下价格来尝试操纵头寸，但这根本不一致。

.menu {
  width: 100%;
  height: auto;
  background-image: url("../img/staff-bartender.jpg");
  background-color: rgb(0, 4, 17);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
}

<article class="menu">
  <h2>Food & Drink</h2>
  <div class="menuitems">
    <div>
      <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
      <p class="text-uppercase">Drinks Soda  Coke products
      </p>
      <p class="text-uppercase">Coffee  Cream and sugar</p>
      <p class="text-uppercase">Beer  Delicious and refreshing</p>
      <p class="text-uppercase">Wine  Light and fruity</p>
      <p class="text-uppercase">Cocktail </p>
    
        <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
        <p class="text-uppercase">fried Pickles  Golden and crispy with tang!</p>
        <p class="text-uppercase">Buffalo Wings  5 wings per order</p>
      </div>
    </div>
</article>

Answer 1

试试这个代码。

.menu {
        width: 100%;
        height: auto;
        background-image: url("../img/staff-bartender.jpg");
        background-color: rgb(0, 4, 17);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
    }
    .menuitems_outer{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .menuitems{
        width: 50%;
        max-width: 30%;
        text-align: left;
    }
    .menuitems h5{
        display: flex;
        justify-content: space-between;
    }

<article class="menu">
    <h2>Food & Drink</h2>
    <div class="menuitems_outer">
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Drinks</h4>
            <h5 class="text-uppercase">Drinks Soda <span></span></h5>
            <p>Coke products</p>
            <h5 class="text-uppercase">Coffee <span></span></h5>
            <p>Cream and sugar</p>
            <h5 class="text-uppercase">Beer <span></span></h5>
            <p>Delicious and refreshing</p>
            <h5 class="text-uppercase">Wine <span></span></h5>
            <p>Light and fruity</p>
            <h5 class="text-uppercase">Cocktail <span></span></h5>
        </div>
        <div class="menuitems">
            <h4 class="text-center quicksand-font text-uppercase">Appetizers</h4>
            <h5 class="text-uppercase">Fried Pickles <span></span></h5>
            <p>Golden and crispy with tang!</p>
            <h5 class="text-uppercase">Buffalo Wings <span></span></h5>
            <p>5 wings per order</p>
        </div>
    </div>
</article>

HTML DIV 文本位置设置

HTML DIV setups for Text location

html

css

flexbox