Center text vertically in a DIV with flex + span style

Question

Center text vertically in a DIV with flex + span style

Navigation

#1 by (3 votes)

3

I have a problem in a div when centering text vertically using flex in CSS. When you put a span style, the text contained in the span jumps to another column!

.TEXT {height: 200px;
font-size: 20px;
text-align:center;
align-items: center;
display: flex;
justify-content: center;}

<!--Ejemplo erróneo al usar span-->
<div class="TEXT">My name is<br>Daniel<br><span style=" font-weight:400; color:red;">From Spain</span></div>

<!--Así es como debería ir el texto-->
<div class="TEXT">My name is<br>Daniel<br>From Spain</span></div>

html css

asked by Daniel 04.11.2017 в 13:46

source

1 answer

How to relate the touch id fingerprint to a user Android adapter to reorder by distance

score 3 · Accepted Answer

Change the flexible container address to column :

.text {
  height: 200px;
  font-size: 20px;
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column; /* aquí */
  justify-content: center;
}

<!--Ejemplo erróneo al usar span-->
<div class="text">My name is<br>Daniel<br><span style="font-weight:400; color:red;">From Spain</span></div>

<!--Así es como debería ir el texto-->
<div class="text">My name is<br>Daniel<br>From Spain
</div>