-2

I'm trying to put my buttons in the vertical and horizontal center of their column. I managed to center them vertically, but I don't know how to center horizontally; the entries should be in three parts:

  • one img,
  • a list with some text about the dog (all centered too), and
  • at last a round button, where I want to implement some animation at last.

I'd like to have a round button in the center of this cell.

I hope you can help me.

I've copied here all of my codes:

#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>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Synav
  • 1
  • 3
  • 1
    Could you use StackOverflow's "JavaScript/HTML/CSS snippet" feature? It's the 7th option in the editing bar. It makes the blue "Run code snippet" button, by which we can easily view what your code currently does (as in [this answer here](https://stackoverflow.com/a/10797328/20594090)) – lchristmann Jul 29 '23 at 17:43
  • what do mean by not centered? – Dulan Jayawickrama Jul 29 '23 at 17:56
  • 1
    "*I've copied here all of my code*" - thank you for the code (sincerely!), but we only need - and we only *want* - to see the code that's relevant to the problem. If we have to fight our way through *all* of it, then it becomes harder to help you, and in the process of stripping away irrelevant code you may well find the answer yourself. – David Thomas Jul 29 '23 at 17:57
  • Having edited your question, to remove some of the obviously irrelevant code (the `` contained no links to external resources, the ` and `` tags are provided by the Snippet, so I removed those too. Incidentally, though, we're not meant to correct errors present in posted code; so I'll just point out the surplus `` tag in the HTML. – David Thomas Jul 29 '23 at 18:03
  • @DulanJayawickrama i want the button to be in the middle of the line.. – Synav Jul 29 '23 at 19:09

1 Answers1

0

To center the button horizontally in its grid cell, declare justify-self: center

I also suggest removing width: 100% from .entry img {} so that the images keep their aspect ratio and don't get stretched.

.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>
Tim R
  • 2,622
  • 1
  • 3
  • 19