网格中水平居中按钮

Question

我试图将按钮放在其列的垂直和水平中心。 我设法将它们垂直居中，但我不知道如何水平居中；条目应分为三部分：

• 一张图片，
• 包含一些关于狗的文本的列表（也全部居中），以及
• 最后一个圆形按钮，我最后想在其中实现一些动画。

我想在这个单元格的中心有一个圆形按钮。

希望你能帮助我。

我在这里复制了我的所有代码：

#seite {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: "Rakkas", cursive;
}

@import url("https://fonts.googleapis.com/css2?family=Rakkas&family=Space+Mono&display=swap");
.navBar {
  border: black solid;
  background-color: rgba(108, 122, 137, 0.8);
  font-weight: bold;
  min-width: 300px;
}

.navBar ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
}

.navBar a {
  text-decoration: none;
  color: black;
}

.text h1 {
  text-align: center;
  border-radius: 25px;
  background-color: rgba(108, 122, 137, 0.8);
}

.text *:not(li,
a,
ul) {
  background-color: rgba(108, 122, 137, 0.8);
  border-radius: 10px;
}

.text *:not(h1,
li,
a,
ul,
p) {
  width: max-content;
}

.text h2,
h3,
p {
  background-color: rgba(108, 122, 137, 0.8);
  padding-left: 3px;
  padding-right: 5px;
}

.entry {
  display: grid;
  grid-template-columns: 20% 1fr 1fr;
  grid-template-rows: 130px;
  width: 100% !important;
  border: solid black;
}

.entry img {
  width: 100%;
  height: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.entry button {
  border-radius: 100%;
  height: 10vh;
  width: 10vw;
  align-self: center;
}

<div id="seite">
  <div class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="info.html">Information</a></li>
      <li><a href="looking.html">Looking for home</a></li>
      <li id="registration"><a href="adopt.html">Adopt one</a></li>
      <li id="grid"><a href="pictures.html">Pictures</a></li>
      <li id="contact"><a href="contact.html">contact us</a></li>
    </ul>
  </div>
  <div class="text">
    <h1>We are looking for a new home</h1>
    <div class="entry">
      <img src="puppy1.jpg" alt="picture of Max">
      <ul>
        <li>Name: Max</li>
        <li>Age: 3 Months</li>
        <li>Character: Highly aggressive</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
    <div class="entry">
      <img src="puppy2.webp" alt="picture of Sam">
      <ul>
        <li>Name: Sam</li>
        <li>Age: 5 Months</li>
        <li>Character: Friendly</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
    <div class="entry">
      <img src="puppy3.webp" alt="picture of Lisa">
      <ul>
        <li>Name: Lisa</li>
        <li>Age: 8 Months</li>
        <li>Character: communicative</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
  </div>
</div>
</div>

Answer 1

要将按钮在其网格单元中水平居中，请声明

justify-self: center

我还建议从

width: 100%

中删除

.entry img {}

，以便图像保持其纵横比并且不会被拉伸。

.entry button {
    justify-self: center;
}

#seite {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: "Rakkas", cursive;
}

@import url("https://fonts.googleapis.com/css2?family=Rakkas&family=Space+Mono&display=swap");
.navBar {
  border: black solid;
  background-color: rgba(108, 122, 137, 0.8);
  font-weight: bold;
  min-width: 300px;
}

.navBar ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-right: 5px;
  padding-left: 5px;
}

.navBar a {
  text-decoration: none;
  color: black;
}

.text h1 {
  text-align: center;
  border-radius: 25px;
  background-color: rgba(108, 122, 137, 0.8);
}

.text *:not(li,
a,
ul) {
  background-color: rgba(108, 122, 137, 0.8);
  border-radius: 10px;
}

.text *:not(h1,
li,
a,
ul,
p) {
  width: max-content;
}

.text h2,
h3,
p {
  background-color: rgba(108, 122, 137, 0.8);
  padding-left: 3px;
  padding-right: 5px;
}

.entry {
  display: grid;
  grid-template-columns: 20% 1fr 1fr;
  grid-template-rows: 130px;
  width: 100% !important;
  border: solid black;
}

.entry img {
  /* width: 100%; */
  height: 100%;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.entry button {
  border-radius: 100%;
  height: 10vh;
  width: 10vw;
  align-self: center;
  justify-self: center;
}

<div id="seite">
  <div class="navBar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="info.html">Information</a></li>
      <li><a href="looking.html">Looking for home</a></li>
      <li id="registration"><a href="adopt.html">Adopt one</a></li>
      <li id="grid"><a href="pictures.html">Pictures</a></li>
      <li id="contact"><a href="contact.html">contact us</a></li>
    </ul>
  </div>
  <div class="text">
    <h1>We are looking for a new home</h1>
    <div class="entry">
      <img src="//placedog.net/200/200?random" alt="picture of Max">
      <ul>
        <li>Name: Max</li>
        <li>Age: 3 Months</li>
        <li>Character: Highly aggressive</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
    <div class="entry">
      <img src="//placedog.net/200/200?r" alt="picture of Sam">
      <ul>
        <li>Name: Sam</li>
        <li>Age: 5 Months</li>
        <li>Character: Friendly</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
    <div class="entry">
      <img src="//placedog.net/200/200" alt="picture of Lisa">
      <ul>
        <li>Name: Lisa</li>
        <li>Age: 8 Months</li>
        <li>Character: communicative</li>
      </ul>
      <button type="button">Adopt me</button>
    </div>
  </div>
</div>
</div>