Text-align: center and align-items: center not working horizontally
Question
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.
6 answers
solution1
20 ACCPTED 2017-01-03 07:53:45
You can use this solution using flexbox.
What was changed?
- Added
flex-direction: columnto.boxesto define how the flex items (<p>element) are placed in the flex container (.boxes). - Added
align-items: centerto center the flex items along the horizontal axis. - Added
justify-content: centerto 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>
solution2
8 2017-01-03 07:54:42
solution3
2 2017-01-03 07:55:28
Use this:
.box p {
align-items: center;
display: block;
text-align: center;
width: 100%;
}
solution4
1 2017-01-03 07:59:00
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 of align-items
solution5
1 2019-03-31 09:11:07
You can use also just this:
.box p {
width: 100%;
display: flex;
align-items: center;
text-align: center
}
solution6
0 2017-01-03 07:59:22
Try this.
.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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.