Hello. I am making a website and I can’t figure out how to center a elements inside a div . Tell me. Thank you in advance.

menu link

Code:

 .hmenu { margin-left:8%; width:1200px; background-color:#119EDA; height:110px; } .ar { background-color:#119EDA; float:left; width:200px; height:44px; background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); background-size: 100% 100%; background-repeat:no-repeat; top:20px; } a { text-decoration:none; color:#FFFFFF; margin-top:10px; font-family:verdana; font-size:14px; } 
 <div class="hmenu"> <div class="ar"><a href="">Главное меню</a></div> <div class="ar"><a href="">Форум</a></div> <div class="ar"><a href="">Мобильная связь</a></div> </div>

  • one
    Can you see the html code? .hmenu or .ar is the parent div? - Yuri
  • @Dmitriy Please run the code. - Vadim Ovchinnikov
  • @VadimOvchinnikov, judging by the colors that are indicated in the CSS: .hmenu is the menu, .ar is the item (actually our div), a is clear that - Yuri
  • And how to make the code run? - Dmitriy
  • HTML code below, immediately after the bracket - Dmitriy

7 answers 7

For parent div'a set position:relative .

And for the element that needs to be centered inside it, apply the following style:

 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

In this way, you can center everything inside containers with position: relative .

PS It seems to be possible to center this way in blocks with absolute or fixed .

    You can center it using: line-height , indents, tables, transform , pseudo-element, flexbox , inside a button element:

    Pseudo-element example - https://jsfiddle.net/fdwqdkya/

     .hmenu { margin-left:8%; width:1200px; background-color:#119EDA; height:110px; } .ar { background-color:#119EDA; float:left; width:200px; height:44px; background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); background-size: 100% 100%; background-repeat:no-repeat; top:20px; display: table; text-align: center; } a { display: table-cell; vertical-align: middle; text-decoration:none; color:#FFFFFF; margin-top:10px; font-family:verdana; font-size:14px; } 
     <div class="hmenu"> <div class="ar"><a href="">Главное меню</a></div> <div class="ar"><a href="">Форум</a></div> <div class="ar"><a href="">Мобильная связь</a></div> </div>

      Display solution display: flex :

       .hmenu { background-color:#119EDA; display: flex; justify-content: center; } .hmenu a { text-decoration: none; color: white; font: 1em sans-serif; border-radius: 2em; margin: 1em 0.3em; padding: .5em 1em; background: linear-gradient(to bottom, hsl(207, 85%, 57%) 15%, hsla(206, 93%, 33%, 1)); box-shadow: inset 0 -0.01em 0.2em 0.03em hsl(197, 57%, 67%), inset 0 0 1em hsla(207, 85%, 44%, 0.3), 0 0.1em 0.3em -0.05em rgba(0, 0, 0, 0.54); } 
       <nav class="hmenu"> <a href="">Главное меню</a> <a href="">Форум</a> <a href="">Мобильная связь</a> </nav>

      • Thanks Folant, the button is clearly drawn, Just trying to impose what I drew myself! At the same time I try to understand the logic: web design and how it is technically possible to do, closer to reality. For example, I drew a button in the graph. the editor. - Dmitriy
      • See for yourself, of course, but the button drawn in the editor is an extra request to the server. Buttons made using CSS gradients are not at all divorced from reality, since gradients are supported in modern browsers. http://caniuse.com/#search=linear-gradient - Folant
      • well, great, improved performance, removed extra weight, thanks - Dmitriy

      Solution through display: inline-block; :

       .ar { display: inline-block; padding: 10px 10px 10px 10px; background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); background-size: 100% 100%; background-repeat:no-repeat; min-width: 100px; } .hmenu { text-align: center; } a { color:white; text-decoration: none; font-family:verdana; font-size:14px; } body { background-color: #129EDB; } 
       <div class="hmenu"> <div class="ar"><a href="">Главное меню</a></div> <div class="ar"><a href="">Форум</a></div> <div class="ar"><a href="">Мобильная связь</a></div> </div>

        Use CSS for all text-align: center and line-height: 110px; :

         * { margin: 0; padding: 0; } .hmenu { width: 100%; background-color: #119EDA; height: 110px; line-height: 110px; text-align: center; } .ar { background-color: #119EDA; display: inline-block; width: 200px; line-height: 44px; text-align: center; height: 44px; background: linear-gradient(rgb(10, 1, 255), rgb(8, 38, 119)); background-size: 100% 100%; background-repeat: no-repeat; border-radius: 10pt; } a { text-decoration: none; color: #FFFFFF; margin-top: 10px; font-family: verdana; font-size: 14px; } 
         <div class="hmenu"> <div class="ar"><a href="">Главное меню</a> </div> <div class="ar"><a href="">Форум</a> </div> <div class="ar"><a href="">Мобильная связь</a> </div> </div>

        Then we get the following construction:

        enter image description here

         .hmenu { margin-left:8%; width:1200px; background-color:#119EDA; height:110px; } .ar { background-color:#119EDA; float:left; width:200px; height:44px; background-image:url(http://pro-okis.ru/file/pro-okis_ru/button/button2.png); background-size: 100% 100%; background-repeat:no-repeat; top:20px; text-align: center; /* Центрируем по горизонтале */ } a { text-decoration:none; color:#FFFFFF; margin-top:10px; font-family:verdana; font-size:14px; line-height: 44px; /* Центрируем по вертикале */ } 
         <div class="hmenu"> <div class="ar"><a href="">Главное меню</a></div> <div class="ar"><a href="">Форум</a></div> <div class="ar"><a href="">Мобильная связь</a></div> </div>

          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>

          • Vertically, too, probably centered? - Ep1demic
          • @ Ep1demic, vertically center using the line-height or padding property. But line-height is more correct. - Vadizar