I want to center the text in the logo as in the picture. Tell me how to do it better? enter image description here

@import "vars" @import "fonts" @import "libs" body overflow-x: hidden position: relative margin: 0 header height: 100vh background: image: url("../img/bg-image.png") size: cover position: center .content left: 80px position: absolute .top-line margin-top: 44px font-size: 15px p text-transform: uppercase font-family: $default-font1 color: #fff margin-left: 37px margin-bottom: 0 &:nth-child(1) font-weight: 400 &:last-child font-weight: 800 white-space: nowrap margin-top: -26px @import "media" // Always at the end 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Date Service Manager</title> <link rel="stylesheet" href="css/main.min.css"> </head> <body> <header> <div class="content"> <div class="top-line"> <img src="../img/logo1.svg" alt="Dart Service Manager"> <p>Dart</p><br> <p>Service Manager</p> </div> </div> </header> </body> </html>

  • It is not clear, give a minimal example, and not the code from your application. those. Put the picture on the Internet and optimize the sass code for this problem, it is not known what could be in vars, media, etc. - ishidex2

1 answer 1

Option not to reinvent the wheel, and use flex. Your p take a div .

Below is an example on pure CSS, but I think you will understand what to do ...

 /* То, что центрирует */ .top-line { display: flex; align-items: center; } /* Дальше ненужный код, просто чтобы пример был нормальный */ .top-line > img { background: #555; width: 30px; height: 30px; margin-right: 5px; text-indent: -9999px; } .top-line > div p { margin: 0; padding: 0; font-family: sans-serif; } 
 <div class="top-line"> <img src="../img/logo1.svg" alt="Dart Service Manager"> <div> <p>Dart</p> <p>Service Manager</p> </div> </div>

  • Thanks, works) - nickita222a444
  • @ nickita222a444, then please accept the answer. - Vladimir Gonchar