html : Center Vertical and Horizontal Text Alignment (Grid CSS)

Home>2022-02-13 07:47

html : Center Vertical and Horizontal Text Alignment (Grid CSS)

"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;
}

&lt;section class="Category_Main_Block"&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;THE DOG AND THE FOX PLAYED IN THE YARD UNTIL THE MORNING AND NIGHT ate horses&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;XADO 90&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;ECONOMY&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;FIRE AND LIGHT&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;UNCLE FEDOR&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;SHANGHAI&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;BROTHERS&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;OFFICIAL&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt; &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;TEREMOK AND WHITE FIRE EATING A CAT THEN EATING A MAN BY THE FIREPLACE&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;LIGHTNING&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;STUDS&lt;/figcaption&gt;  &lt;/figure&gt;  &lt;figure class="Category_Block_1"&gt;    &lt;a class="Category_Link_1" href="/"&gt;      &lt;div&gt;&lt;/div&gt;    &lt;/a&gt;    &lt;img class="Category_img_1" src=""&gt;    &lt;figcaption class="Category_name_1"&gt;SOUTH MAGNET&lt;/figcaption&gt;  &lt;/figure&gt;&lt;/section&gt;

html css

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;
}

&lt;section class="Category_Main_Block"&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;THE DOG AND THE FOX PLAYED IN THE YARD UNTIL THE MORNING
 NIGHTS ate horses&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;XADO 90&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;ECONOMY&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;FIRE AND LIGHT&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;UNCLE FEDOR&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;SHANGHAI&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;BROTHERS&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;OFFICIAL&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;TEREMOK AND WHITE FIRE EATING A CAT THEN EATING A MAN BY THE FIREPLACE&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;LIGHTNING&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;ROOTS&lt;/figcaption&gt;&lt;/figure&gt;&lt;figure class="Category_Block_1"&gt;&lt;a class="Category_Link_1" href="/"&gt;&lt;div&gt;&lt;/div&gt;&lt;/a&gt;&lt;img class="Category_img_1" src=""&gt;&lt;figcaption class="Category_name_1"&gt;SOUTH MAGNET&lt;/figcaption&gt;&lt;/figure&gt;&lt;/section&gt;

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

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

TutorialFor

html : Center Vertical and Horizontal Text Alignment (Grid CSS)