Please help me how to align the text in the block and vertically and horizontally. Thank you in advance! So that in the span with the button text is exactly centered and vertical and horizontal.

 .flex-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; max-width: 905px; margin: 0 auto; } ul.flex2 li { width: 150px; height: 200px; border: 3px solid; margin: 20px; margin-top: 100px; display: inline-block; text-align: center; } span.button1 { margin: 5px 0px 5px 0px; height: 40px; background-color: green; } span { max-width: 150px; max-height: 200px; display: block; } 
 <div class="flex-countainer"> <ul class="flex"> <li><span>text</span><span class="button">text</span><span></span> <li><span>text</span><span class="button">text</span><span></span> <li><span>text</span><span class="button">text</span><span></span> <li><span>text</span><span class="button">text</span><span></span> </ul> </div>

  • one
    Maybe so jsfiddle.net/c72quumw - stackanon
  • The text inside the span.button is in the center. clarify your styles or question details - lexxl
  • To align single-line text vertically, you need to set the height of the line equal to the height of the block. - Russian Bear
  • and if the block height is not known? - user33274

1 answer 1

 html, body { height: 100%; } body { margin: 0; } .flex-container { height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; } .row { width: auto; border: 1px solid blue; } .flex-item { background-color: tomato; padding: 5px; width: 20px; height: 20px; margin: 10px; line-height: 20px; color: white; font-weight: bold; font-size: 2em; text-align: center; } 
 <div class="flex-container"> <div class="row"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> </div> </div>

something like this