brackets

enter image description here

When I want to indent the logo block, the indent is done inside the screen block, and from it. I know what position: absolute; can do position: absolute; and indentation in percent, but I need in pixels. Tell me, is there a way to solve this problem?

  • You can do position: absolute and indentation in pixels. Do not have a margin-top: 170px logo margin-top: 170px , but a .screen - padding-top: 170px - Yuri
  • Why not give the logo a style: padding-top:? - goodalien
  • @ 2booos at least one answer helped you? If so, mark it as accepted. If not, leave a clarifying comment. - Vadim Ovchinnikov

2 answers 2

Option number 1:

 .screen { position: relative; background-color: #222; height: 100vh; padding-top: 170px; } .logo { position: relative; margin: 0 auto; height: 86px; width: 340px; background: url("/img/logo.png"); }

Option number 2:

 .screen { position: relative; background-color: #222; height: 100vh; } .logo { position: relative; margin: 0 auto; padding-top: 170px; height: 86px; width: 340px; background-image: url("/img/logo.png"); background-repeat: no-repeat; background-size: 100% 0; background-position-y: bottom; }
  • Thank you very much, sorry that the code was a screenshot, and you had to rewrite - 2booos
  • @ 2booos, that's okay, already used. I rewrote the code in one minute) - Yuri
  • but do not tell me how to make the logo change the screen size too (as in the class image-responsive bootstrap) - 2booos
  • @ 2booos, for this, use the @media properties: developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… . There you can specify two parameters or more: @media (max-width: 250px) and (min-width: 100px) - Yuri

1. Solution via Flexbox

 .container-fluid { height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

2. Solution through a pseudo-element with IE 9 support

 .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; text-align: center; } /* Обертка */ .container-fluid:before { content: ''; height: 100%; display: inline-block !important; vertical-align: middle; } /* Блок, который нужно выровнять */ .row { display: inline-block; vertical-align: middle; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

3. Solution through absolute positioning

 .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

4. Solution through line-height

 .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ line-height: 400px; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>