CODEWITHSUNDEEP
htmlcss
Fjott
Fjott

Reputation: 1137

Center divs and content inside a main div

I am trying to achieve the following:

  1. The text inside the square (example text: "1/4") should be centered horizontally and vertically.
  2. The four squares should be spread with the same distance over the main container (red).
  3. The text (example text: "Name", "Longer Name" etc.) should be centered over the squares, and not affect the spreading of the squares (point 2)

What I got this far is the code below. I would greatly appreciate if somebody could point me in the correct direction!

.container {
  background-color: red;
  width: 320px;
  height: 320px;
  margin: 30px auto 30px auto;
}

.inner {
  display: flex;
}

.inner-content {
    display: block;
   /* width: 25%;*/
    margin-left: auto;
    margin-right: auto;
    background-color: green;
  }

.text {
    width: 25%;
    text-align: center;
}

.square {
  margin-top: 5px;
  height: 25px;
  width: 25px;
  vertical-align: top;  
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  background-color: black;
  box-shadow: 0 0 0 2px red, 0 0 0 5px black;
}
<div class="container">

  <div class="inner">
    <div class="inner-content">
      <span class="text">Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Longer Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Yo</span>
      <div class="square">
        1/4
      </div>
    </div>

  </div>

Upvotes: 0

Views: 38

Answers (1)

SuperDJ
SuperDJ

Reputation: 7661

Take a look at the following example:

* {
  box-sizing: border-box;
}

.container {
  background-color: red;
  width: 320px;
  height: 320px;
  margin: 30px auto 30px auto;
  padding: 5px;
}

.inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* fix spreading */
  grid-column-gap: 5px;
}

.inner-content {
  background-color: green;
  text-align: center;
}

.text {
  width: 100%;
}

.square {
  margin: 5px auto; /* fix box centering */
  height: 25px;
  width: 25px;
  vertical-align: top;  
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background-color: black;
  box-shadow: 0 0 0 2px red, 0 0 0 5px black;
  line-height: 25px; /* fix vertical center */
}
<div class="container">

  <div class="inner">
    <div class="inner-content">
      <span class="text">Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Longer Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Name</span>
      <div class="square">
        1/4
      </div>
    </div>

    <div class="inner-content">
      <span class="text">Yo</span>
      <div class="square">
        1/4
      </div>
    </div>

  </div>

Upvotes: 1

Related Questions