0

У меня в шапке есть адрес, телефон и поиск.

Телефон должен располагаться по центру страницы, а адрес и поиск относительно телефона по центру слева и справа. Как это лучше оформлять в css?

http://goo.gl/dHOhYo - вот так должно получиться в результате

1
  • @Дарья Бакланова, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 16 дек 2014 в 9:28

4 ответа 4

2

Если вы не используете никаких фреймворков для сетки, то можно сделать так:

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;
}

Это один из вариантов, возможны и другие, вот как это выглядит

2

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;
}

Демо

2

Также можно так 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;
}
0
<header>
  <div class="header-item">
     <p>Адрес</p><p>Телефон</p><inpit type="search">
  </div>
</header>

в стилях прописываете .header-item {display: inline; justify-content: space-around;} Остальные настройки в стилях это уже размеры и украшения.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.