I want to insert some kind of text inside a container with flexible boxes but placing an internal div does not execute it inside the container, why is this? How can I generate a space inside the container?
<div >
<ul className='grid'>
<li className='flex-item'>1
<div>Un dispositivo.</div></li>
<li className='flex-item'>1</li>
<li className='flex-item'>1</li>
</ul>
</div>
and the styles.css
.grid{ padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around; } // justify-content: space-around;
.flex-item { border-top-color: coral;
border-width:1px;
border-style:solid;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 15px;
text-align: center;}
When assigning a
line-height: 150px;
what you are doing is "forcing" the vertical alignment for the first line, that is, the next line (eg: <div>Un dispositivo.</div>
) will be150px
lower and that is why it is offset ( appears outside the "box" )Solution:
To vertically center the content within each
.flex-item
, you could create adiv
which iscentre horizontal y verticalmente
.demonstration: