Text-align: center and align-items: center not working horizontally
Just add
justify-content: center;
to your box
class.
That's all you need to do. See here.
You can use this solution using flexbox.
What was changed?
- Added
flex-direction: column
to.boxes
to define how the flex items (<p>
element) are placed in the flex container (.boxes
). - Added
align-items: center
to center the flex items along the horizontal axis. - Added
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>
Use this:
.box p {
align-items: center;
display: block;
text-align: center;
width: 100%;
}
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