HTML布局问题求助：菜单无法居中显示

问题原因 #

你的代码中body设置了display: grid; grid-template-columns: 1fr 1fr 1fr;，这会让body下的所有直接子元素（包括图片、MENU的div、三个main区块）自动分配到三列中，导致菜单和内容分散排列，无法整体居中。另外#kk的grid-column: 1 /span 3;无效，因为它的父容器是普通div，不是grid容器。

修改后的代码 #

CSS

* {
  background-color: #62544f;
  color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#kk {
  text-align: center;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 0.5rem;
  max-width: 600px;
  margin: 2rem auto;
}

article {
  width: 500px;
  background-color: #62544f;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: min-content auto min-content;
  align-items: center;
}

article div {
  border-bottom: 3px solid black;
  height: 2rem;
  margin: 0 1rem;
}

body {
  padding-bottom: 150px;
  border: 4px solid rgb(255, 255, 255);
  text-align: center;
}

main {
  margin: 2rem 0;
}

main h1 {
  color: #ffffff;
  margin-bottom: 1rem;
}

#kafe {
  position: absolute;
  width: 250px;
  height: 208px;
  left: 166px;
  top: 15px;
  background: url(hand-drawn-of-hot-coffee-with-roasted-coffee-beans-iam-nee-removebg-preview.png);
  filter: drop-shadow(0px 10px 4px rgba(0, 0, 0, 0.21));
}

HTML

<img id="kafe" src="./obrazky/kavicka.png" alt="kava" />
<img id="bob" src="./obrazky/bbb.png" alt="kávové semínka??"/>
<img id="logo" src="./obrazky/logo.png" alt="logo"/>

<div><h1 id="kk">MENU</h1> </div>

<main>
  <h1>KÁVA</h1>
  <article>
    <h2>Luongo</h2>
    <div></div>
    <h3>40,-</h3>
  </article>
  <article>
    <h2>Espresso</h2>
    <div></div>
    <h3>40,-</h3>
  </article>
  <article>
    <h2>Americano</h2>
    <div></div>
    <h3>55,-</h3>
  </article>
  <article>
    <h2>Cappucinno</h2>
    <div></div>
    <h3>55,-</h3>
  </article>
  <article>
    <h2>Café latte</h2>
    <div></div>
    <h3>60,-</h3>
  </article>

  <article>
    <h2>flat white</h2>
    <div></div>
    <h3>70,-</h3>
  </article>
  <article>
    <h2>Mocha</h2>
    <div></div>
    <h3>70,-</h3>
  </article>
  <article>
    <h2>Ledová káva</h2>
    <div></div>
    <h3>70,-</h3>
  </article>
</main>
<main>
  <h1>NÁPOJE</h1>
  <article>
    <h2>coca-cola</h2>
    <div></div>
    <h3>30,-</h3>
  </article>
  <article>
    <h2>Kofola</h2>
    <div></div>
    <h3>40,-</h3>
  </article>
  <article>
    <h2>Sprite</h2>
    <div></div>
    <h3>30,-</h3>
  </article>
  <article>
    <h2>Fanta</h2>
    <div></div>
    <h3>35,-</h3>
  </article>
  <article>
    <h2>Cappy</h2>
    <div></div>
    <h3>35,-</h3>
  </article>
  <article>
    <h2>Limonáda</h2>
    <div></div>
    <h3>60,-</h3>
  </article>
  <article>
    <h2>Perlivá voda</h2>
    <div></div>
    <h3>25,-</h3>
  </article>
  <article>
    <h2>voda</h2>
    <div></div>
    <h3>15,-</h3>
  </article>
</main>
<main>
  <h1>SLADKÉ</h1>
  <article>
    <h2>Palačinky</h2>
    <div></div>
    <h3>55,-</h3>
  </article>
  <article>
    <h2>Medovník</h2>
    <div></div>
    <h3>25,-</h3>
  </article>
  <article>
    <h2>Tiramisu</h2>
    <div></div>
    <h3>30,-</h3>
  </article>
  <article>
    <h2>Cheesecake</h2>
    <div></div>
    <h3>30,-</h3>
  </article>
  <article>
    <h2>Míša řez</h2>
    <div></div>
    <h3>30,-</h3>
  </article>
  <article>
    <h2>brownies</h2>
    <div></div>
    <h3>35,-</h3>
  </article>
  <article>
    <h2>Mrkový dort</h2>
    <div></div>
    <h3>35,-</h3>
  </article>
  <article>
    <h2>Makronky</h2>
    <div></div>
    <h3>15,-</h3>
  </article>
</main>

关键修改点 #

• 移除了body的grid三列布局，避免子元素被强制分散；
• 给#kk设置margin: 2rem auto实现水平居中，同时添加内边距和最大宽度优化显示；
• 给article添加align-items: center让文字和分隔线垂直对齐；
• 全局设置box-sizing: border-box和清除默认边距，避免布局偏移；
• 优化main和分类标题样式，增强视觉层次。

内容的提问来源于stack exchange，提问作者naty Poláková