Home>

"THE DOG AND THE FOX PLAYED IN THE YARD UNTIL THE MORNING THE NIGHT ate horses"

⠀⠀⠀⠀And

"TEREMOK AND A WHITE FIRE EAT A CAT THEN ate a MAN BY THE FIREPLACE"

These two texts look fine in boxes (they're center aligned), but the rest of the text in the boxes isn't center aligned.

How to center text vertically and horizontally in other blocks.

.Category_Main_Block {
  padding-top: 2vw;
  padding-bottom: 2vw;
  display:grid;
  grid-template-columns: repeat(6, 15.5%);
  grid-template-rows: repeat(2, max-content);
  column-gap: 1vw;
  row-gap: 2vw;
  margin-left: 2vw;
}
.Category_Block_1 {
  background: #20B2AA;
  border-radius: 1.5vw;
  margin: 0;
}
.Category_img_1 {
  background: grey;
  border-top-right-radius: 1.5vw;
  border-top-left-radius: 1.5vw;
  width: 100%
  height: 12vw;
}
.Category_name_1 {
  text-align: center;
  padding: 5px
  font-size: 18px;
  color: black;
  font-family: arial;
}
<section class="Category_Main_Block">  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">THE DOG AND THE FOX PLAYED IN THE YARD UNTIL THE MORNING AND NIGHT ate horses</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">XADO 90</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">ECONOMY</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">FIRE AND LIGHT</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">UNCLE FEDOR</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">SHANGHAI</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">BROTHERS</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">OFFICIAL</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/"> <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">TEREMOK AND WHITE FIRE EATING A CAT THEN EATING A MAN BY THE FIREPLACE</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">LIGHTNING</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">STUDS</figcaption>  </figure>  <figure class="Category_Block_1">    <a class="Category_Link_1" href="/">      <div></div>    </a>    <img class="Category_img_1" src="">    <figcaption class="Category_name_1">SOUTH MAGNET</figcaption>  </figure></section>
  • Answer # 1

    They're not centered, they just filled the entire block. You can use flex:

    .Category_Main_Block{
    padding-top:2vw;
    padding-bottom:2vw;
    display:grid;
    grid-template-columns: repeat(6, 15.5%);
    grid-template-rows: repeat(2, max-content);
    column-gap:1vw;
    row-gap:2vw;
    margin-left:2vw;
    }
    .Category_Block_1{
    background:#20B2AA;
    border-radius: 1.5vw;
    margin:0;
    display:flex; /*+*/
    flex-direction: column; /*+*/
    }
    .Category_img_1{
    background:gray;
    border-top-right-radius: 1.5vw;
    border-top-left-radius: 1.5vw;
    width:100%;
    height:12vw;
    }
    .Category_name_1{
    text-align:center;
    padding:5px;
    font-size:18px;
    color:black;
    font-family:arial;
    flex: 1; /*+*/
    display:flex; /*+*/
    align-items: center; /*+*/
    word-break: break-all;
    }
    <section class="Category_Main_Block"><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">THE DOG AND THE FOX PLAYED IN THE YARD UNTIL THE MORNING
     NIGHTS ate horses</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">XADO 90</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">ECONOMY</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">FIRE AND LIGHT</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">UNCLE FEDOR</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">SHANGHAI</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">BROTHERS</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">OFFICIAL</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">TEREMOK AND WHITE FIRE EATING A CAT THEN EATING A MAN BY THE FIREPLACE</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">LIGHTNING</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">ROOTS</figcaption></figure><figure class="Category_Block_1"><a class="Category_Link_1" href="/"><div></div></a><img class="Category_img_1" src=""><figcaption class="Category_name_1">SOUTH MAGNET</figcaption></figure></section> 

    Thanks, is it possible to do the same with grid without flex

    Хлебушек2022-02-13 21:27:00