Text-align: center and align-items: center not working horizontally

html css responsive-design flexbox

47,347

Solution 1

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>

Solution 2

Just add

justify-content: center;

to your box class.

That's all you need to do. See here.

Solution 3

Use this:

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

Solution 4

You can use also just this:

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

Solution 5

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

View more solutions

47,347

m_cht

Updated on June 29, 2020

Comments

m_cht almost 4 years
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.
- Deepak Bandi over 7 years
  
  SO you need the colors to fill the page with text at center?
- m_cht over 7 years
  
  Leo the lion, regarding the possible duplicate, that post was asking about how you can arrange the blocks vertically, but my question is how do I get the texts to be aligned in the center of the box as my usual solution isn't working. I don't see how it is similar.
- m_cht over 7 years
  
  Deepak, the colours don't necessarily have to fill the page, but I do want the text to be at the center of the boxes.
m_cht over 7 years

Thanks, but it doesn't seem like it works. This shows up: imgur.com/a/cBKlc . I did find the answer to my question though.
m_cht over 7 years

Thank you, but I am looking for both vertical and horizontal center alignment, whereas text-align only gives me a horizontal center alignment. I did find the answer to my answer though.
cstricklan over 6 years

It would be helpful if you explained why the code presented solves the OP's problem.