I have an address, a phone and a search in my cap.

The phone should be located in the center of the page, and the address and search relative to the phone in the center to the left and to the right. How is it better to make out in css?

http://goo.gl/dHOhYo - this is how it should be as a result

  • @ Daria Baklanova, If you are given a comprehensive answer, mark it as correct (click on the check mark next to the selected answer). - Vitalina

4 answers 4

If you do not use any framework for the grid, you can do this:

HTML:

<div class="header"> <div class="header-item address">Адрес</div> <div class="header-item phone">Телефон</div> <div class="header-item search">Поиск</div> </div>

CSS:

 .header { width: 600px; // Напишите нужную ширину } .header-item { background: #aaa; float: left; width: 33.33%; // Можно для каждого блока задать свою ширину } .phone { background: #ccc; text-align:center; } .search { text-align:right; }

This is one of the options, others are possible, this is how it looks

    HTML:

     <div class="container"> <div class="header"> <div class="address">Адрес</div> <div class="search"><input type="text"></div> <div class="phone">+ 12345667</div> </div> </div>

    CSS:

     .container { margin: 0 auto; width: 1000px; } .header { background: #aaa; padding: 20px; } .header:after { clear: both; content: ''; display: block; } .address { float: left; } .search { float: right; } .phone { margin: 0 200px; text-align: center; }

    Demo

      You can also http://jsfiddle.net/o7gh4ohe/

      HTML

       <header> <div class="col col-left"> <p>Text text text</p> </div> <div class="col col-center"> <p><strong>+7 123456789</strong></p> </div> <div class="col col-right"> <form> <input type="search" placeholder="Search" /> </form> </div> </header>

      CSS

       *{ padding: 0; margin: 0; } header{ width: 600px; margin: 0 auto; display: table; height: 100px; background: #000; color: #fff; font-size: 14px; font-family: 'Segoe UI'; } header .col{ display: table-cell; vertical-align: middle; width: 200px; } header .col-center{ text-align: center; font-size: 16px; background: #ccc; } header .col-right{ text-align: right; } 
         <header> <div class="header-item"> <p>Адрес</p><p>Телефон</p><inpit type="search"> </div> </header>

        in styles you write .header-item {display: inline; justify-content: space-around;} The remaining settings in the styles are already sizes and decorations.