Build A Page of Playing Card

HTML-CSS
1

Help me out in my third card, ,
In the middle part of the card, I wanted the second single element to be vertically centered in between the double elements without leaning on the left side; how can I do that?

<--html file-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Playing Cards</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <main id="playing-cards">
      <div class="card">
        <div class="left">A<br />♠</div>
        <div class="middle">♠<br />♠</div>
        <div class="right">♠<br />A</div>
      </div>
      <div class="card">
        <div class="left">1<br />♣</div>
        <div class="middle">♣♣<br />♣♣</div>
        <div class="right">♣<br />1</div>
      </div>
      <div class="card" style="color: red">
        <div class="left">2<br />♦</div>
        <div class="middle">♦♦<br />♦<br />♦♦</div>
        <div class="right">♦<br />2</div>
      </div>
    </main>
  </body>
</html>


<--css file-->

body {
  background-color: cyan;
}
#playing-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.card {
  background-color: #fff;
  width: 270px;
  height: 370px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 3px 5px 0 black;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.1);
}
.left {
  display: flex;
  align-self: flex-start;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 30px;
}
.middle {
  display: flex;
  flex-direction: column;
  align-self: center;
  font-size: 50px;
}
.right {
  display: flex;
  align-self: flex-end;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 30px;
}
2

Hi,
I am not sure if this is what you want, but try adding a text-align property to your .middle selector and set to the center. I hope this helps.

1 Like
3

Thanks, it worked. :folded_hands: