* { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; margin: 0 auto; } #header_nav { position: absolute; width: 1190px; height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; } #header_nav img { position: relative; margin: auto 10px; height: 60px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Umbrella</title> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div> </body> </html>

How do I center the "google" picture?

    5 answers 5

    Option 1 ( vertical-align: middle; text-align: center; ):

     * { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; width: 100%; margin: 0 auto; } #header_nav { position: absolute; max-width: 1190px; width: 100%; height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; text-align: center; } #header_nav:before{ content: ''; display: inline-block; vertical-align: middle; height: 100%; } #header_nav img { vertical-align: middle; position: relative; margin: auto 10px; height: 60px; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Umbrella</title> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div> </body> </html>

    Too, but without pseudo-element :

     * { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; width: 100%; margin: 0 auto; } #header_nav { position: absolute; max-width: 1190px; width: 100%; height: 90px; line-height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; text-align: center; } #header_nav img { position: relative; margin: auto 10px; height: 60px; vertical-align: middle; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Umbrella</title> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div> </body> </html>

    Option 2 (flex):

     * { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; width: 100%; margin: 0 auto; } #header_nav { position: absolute; max-width: 1190px; width: 100%; height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; display: flex; align-items: center; align-content: center; justify-content: center; } #header_nav img { position: relative; margin: auto 10px; height: 60px; } 
     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Umbrella</title> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div> </body> </html>

      #header_nav - line-height: 90px;

      #header_nav img - vertical-align: middle;

       * { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; margin: 0 auto; } #header_nav { position: absolute; width: 1190px; height: 90px; line-height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; } #header_nav img { position: relative; margin: auto 10px; height: 60px; vertical-align: middle; } 
       <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div>

        #header_nav img styles #header_nav img

         #header_nav img { top: calc(50% - 30px); }

          add to #header_nav display: flex

          or, because you have a fixed height of the picture and the parent unit

           #header_nav img { position: relative; height: 60px; margin-top: 45px; top: -30px; } 

             * { padding: 0; margin: 0; } #header { height: 100vh; width: 100%; background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqo7F5-ChUGOn7NF_7AfxQ6HLkwzjU5avVAZSAmWYfK6mFqQFj'); background-repeat: no-repeat; background-size: 100%; background-attachment: fixed; overflow: hidden; } .mw { max-width: 1190px; margin: 0 auto; } #header_nav { position: absolute; width: 1190px; height: 90px; left: 0; right: 0; margin: 35px auto; background: #fff; vertical-align: middle } #header_nav img { margin: auto 10px; height: 60px; position: absolute; top: 0; bottom: 0; } 
             <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Umbrella</title> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <div id="header_nav"> <img src="https://www.google.com/photos/about/static/images/google.svg"> </div> <div id="header"> <div class="mw"> </div> </div> </body> </html>