How to align a text inside a
element horizontally?

Question

How to align the text inside a div centrally vertically?

I have a div element inside my html page where and the height of the div is the screen size and the text inside that div need to be at the center. I have used text-align : center property to align it horizontally but i need to do that horizontally as well.

your are looking for flexbox – Sfili_81 Jul 23 '19 at 07:28 — Sfili_81, Jul 23 '19 at 07:28

score -1 · Answer 1 · answered Jul 23 '19 at 07:32

I think it's work for you)

.your-div-class {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

score -1 · Answer 2 · answered Jul 23 '19 at 07:32

.wrapper{

/* just to create a box */
  width:300px;
  height:300px;
  margin:auto;

/* use flex to center vertically */
  display:flex;
  justify-content: center;
  flex-direction: column;
  
/* use text-align to center horizontally, can also be done on the text element itself if its a block */
  text-align: center;
}

<div class="wrapper">
<span class="text">My super centered text</span>
</div>

Use flexbox to center the text element vertically, then use text-align to center it horizontally. (scroll down in the snippet)

How to align a text inside a element horizontally?

2 Answers2

How to align a text inside a
element horizontally?