My text is centered and has a stroke. Is it possible that this stroke was within the boundaries of the text and then did not climb

enter image description here

#headed{ text-align: center; font-size: 34px; color: #70B8FF; font-family: Gabriola; border:5px blue dashed; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="D:\ВЛАД\AtomProject\FirstWeb\style.css"> <title></title> </head> <body> <div id="headed"><span><b>About Me</span></b></div> </body> </html>

  • The question is not very clear. Border you like for the block, not for text. Where should he not go? Slightly more details on the problem would be. - MedvedevDev
  • I need that the frame was under the text less and not the whole page - Aqua
  • maybe there is a layout? Or will you draw it yourself? - MedvedevDev

1 answer 1

 #headed{ text-align: center; font-size: 34px; color: #70B8FF; font-family: Gabriola; border:5px blue dashed; display: block; padding: .2rem; margin: 0 auto; width: 160px; } .flex-container { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-item:nth-child(1) { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flex-item h1 { padding: .2rem; border: 6px dotted red; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="D:\ВЛАД\AtomProject\FirstWeb\style.css"> <title></title> </head> <body> <div id="headed"> <strong>About Me</strong> </div> <!-- flex --> <div class="flex-container"> <div class="flex-item"> <h1>About Me</h1> </div> </div> </body> </html>

  • center can not be aligned? - Aqua
  • @AquaGF add margin: auto; - Alexey Giryayev
  • Thanks helped - Aqua