Menu
This has never been the case to me before. I tried text-align: center on all sorts of places and they all don't work. They work vertically but they don't working horizontally. I'm trying to get it work both horizontally and vertically for each box.
This is my code:
.boxes { height:100%; } .box { width: 33%; height: 20%; display: -webkit-flex; } .box p { display: flex; align-items: center; } .box1 { background: magenta; } .box2 { background: cyan; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: purple; } * { margin:0; padding:0; } html, body { height: 100%; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="tabletest.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="boxes"> <div class="box box1"><p>Box 1</p></div> <div class="box box2"><p>Box 2</p></div> <div class="box box3"><p>Box 3</p></div> <div class="box box4"><p>Box 4</p></div> <div class="box box5"><p>Box 5</p></div> </div> </body> </html>I'm also trying to stick to percentage to have a responsive design.
EDIT: This may seem like a duplicate to another post, but my question here is how do I get the texts aligned directly in the center (both vertically and horizontally) while keeping the order of the boxes.
614
Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Center the text horizontally between the side margins Select the text that you want to center. On the Home tab, in the Paragraph group, click Center .
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
You can use this solution using flexbox.
What was changed?
flex-direction: column to .boxes to define how the flex items (<p> element) are placed in the flex container (.boxes).align-items: center to center the flex items along the horizontal axis.justify-content: center to center the flex items (<p> element) on the vertical axis.* { margin: 0; padding: 0; } html, body { height: 100%; } .boxes { height: 100%; } .box { align-items: center; display: flex; flex-direction: column; height: 20%; justify-content: center; width: 33%; } .box1 { background: magenta; } .box2 { background: cyan; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: purple; }<div class="boxes"> <div class="box box1"><p>Box 1</p></div> <div class="box box2"><p>Box 2</p></div> <div class="box box3"><p>Box 3</p></div> <div class="box box4"><p>Box 4</p></div> <div class="box box5"><p>Box 5</p></div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
