Can align text to center at flex display

Question

What my problem is, that i cant align the text to center horizontally. Vertically, i aligned it the center, but horizontally, i cant. (When the text is longer, its centered horizontally?! If i see it right.)

I tryed adding the <a> element display:block and text-align:center, but it didnt solved my problem.

I attach a photo of the site.Photo-Click here

The <a> element is in a <h2> element.

<h2> css:

line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;

The <a>-element css:

color: #333;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -ms-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s;

What am i doing wrong?

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Nov 16 '18 at 17:19

score 4 · Answer 1 · answered Nov 16 '18 at 17:07

Without seeing your code in context with the rest of the html and css, I would put justify-content: center ; on the parent element ie the h2. I am assuming this is set to be 100% of width to match the width of the image.

Check this out for full info on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 3 · Answer 2 · answered Nov 17 '18 at 00:00

display: flex defines an element as a flex container and enables flex properties on all of its direct children. Instead of applying flex to <h2>, you need to apply it to the parent container for it to work.

.container {
  width: 200px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

<div class='container'>
  <h2>
    <a>Game Title</a>
  </h2>
</div>

Can align text to center at flex display

2 Answers2