How to align(center) text inside childs of flexbox

Question

.cnt {
  display: flex;
}

.one {
  background: #ff0000;
  width: 300px;
}

.two {
  background: #00ff00;
  flex: 1;
}

<div class="cnt">
  <div class="one">
    Center me
  </div>
  <div class="two">
    And me
  </div>
</div>

Is there actually a way? Of course I may add another div inside and set it as I like, but I want it to be more elegant... so, is that actually possible to align this text horizontally, at least, without using another divs?

https://jsfiddle.net/cwfs3b0x/

`text-align:center` ???? Have you tried something ? https://jsfiddle.net/cwfs3b0x/1/ — DaniP, Mar 15 '17 at 19:54
Possible duplicate of [Flexbox: center horizontally and vertically](http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — balintpekker, Mar 15 '17 at 19:55

score 0 · Accepted Answer · answered Mar 15 '17 at 19:55

0

Unless I misunderstand you, this is just:

div {text-align: center}

answered Mar 15 '17 at 19:55

mayersdesign

5,062
4
35
47

No problem :) Sometimes things seem more complicated than they are haha, you can accept the answer if it helped you. – mayersdesign Mar 15 '17 at 20:00
Yeah, I know :) In a minute it will allow me to accept – mizzo Mar 15 '17 at 20:06

How to align(center) text inside childs of flexbox

1 Answers1