All geek questions in one place

Text-align: center and alignment: center does not work horizontally

It has never been for me before. I tried text-align: center in all places and all of them do not work. They work vertically, but they do not work horizontally. I am trying to make it work both horizontally and vertically for each window.

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 also try to stick to a percentage in order to have a responsive design.

EDIT: this might seem like a duplicate for another post, but my question here is how to get the text aligned right in the center (both vertically and horizontally) while maintaining the order of the boxes.

+10
source share
6 answers

You can use the following solution using flexbox:

 .boxes { height:100%; } .box { width:33%; height:20%; display:flex; flex-direction:column; align-items:center; justify-content:center; } .box1 { background: magenta; } .box2 { background: cyan; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: purple; } * { margin:0; padding:0; } html, body { height: 100%; } 
 <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>
+14
source

Use this:

  .box p { align-items: center; display: block; text-align: center; width: 100%; }
+2
source

Just add

 justify-content: center;

to your box class.

That is all you have to do. Look here

+1
source

Try the following options

 .boxes { height:100%; } .box { width: 33%; height: 20%; } .box p { text-align: center; } .box1 { background: magenta; } .box2 { background: cyan; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: purple; } * { margin:0; padding:0; } html, body { height: 100%; }

Note: I used text-align insted alignment elements

+1
source

You can also use only this:

 .box p { width: 100%; display: flex; align-items: center; text-align: center }
+1
source

Try it.

 .boxes { height:100%; } .box { width: 33%; height: 20%; display: -webkit-flex; position: relative; } .box p { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .box1 { background: magenta; } .box2 { background: cyan; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: purple; } * { margin:0; padding:0; } html, body { height: 100%; }
0
source

Source: https://habr.com/ru/post/1013717/

More articles:


All Articles