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
Related questions
- javascript : Block scrolling by clicking on the arrows
- html : The syntax in scss is partially not highlighted for some reason, '{' is lit in red, although there are no errors and ther
- The height of the html element is actually higher than indicated
- javascript : Slick slider not adapting
- html : The top panel conflicts with the picture
- html : How to make such a list?
- javascript : How to implement the promotion of text from the block?
- html : How to lay out a block with text and a separate element
- html : Why is the block not center aligned?
- html : When adding img, unnecessary occupied space is created around
They're not centered, they just filled the entire block. You can use flex:
Thanks, is it possible to do the same with grid without flex
Хлебушек2022-02-13 21:27:00