Jump to content
покупайте без комиссии
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

выравнивание изображения в header по центру


Recommended Posts

Добрый день. Подскажите пожалуйста как добавить в шапку (header) изображение так, что бы оно выравнивалось по центру при любом размере окна браузера.

пока все вот в таком виде, но не работает. Картинка есть но все время по левому краю выравнивается.  

 

html:

<header>
 <div class="img">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
            <?php if ($home == $og_url) { ?>
              <img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
            <?php } else { ?>
              <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } ?>
          <?php } else { ?>
            <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
      <div class="col-sm-5"><?php echo $search; ?>
      </div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
    </div>
  </div>
 </div>
</header>

 

css:

.img {
 
 background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;
 text-align: center;
 height: 250px;
 display: block;
 margin: 0 auto;
}

Link to post
Share on other sites

1 час назад, alena967 сказал:

зачем использовать css свойство background-image у тега img?

можно было просто сделать background?

Link to post
Share on other sites

4 часа назад, jaffagold сказал:

background-position: center;

помогло, спасибо.

про размер тоже на до не забыть.

Будет ли это работать если вообще убрать этот div img, и так же выровнять фон в header'е?

Link to post
Share on other sites

4 часа назад, alena967 сказал:

Уберите все стили в css с этого img и добавьте класс center-block

 

не совсем понял, в html добавить  "класс center-block"?

Link to post
Share on other sites

@red123 вы всех, дающих вам совет, запутали своим говнокодом. Надо же тэгу img присвоить в css бэкграунд! Я конечно понимаю что это новое слово в html верстке, но все таки пролейте свет - что вы хотите отцентровать: изображение или бэкграунд??

Link to post
Share on other sites

2 часа назад, red123 сказал:

не совсем понял, в html добавить  "класс center-block"?

тэгу img добавить класс center-block

 

в стилях вообще убрать все это

8 часов назад, red123 сказал:

css:

.img {
 
 background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;
 text-align: center;
 height: 250px;
 display: block;
 margin: 0 auto;
}

 

Link to post
Share on other sites

Ребята, разуйте глаза.

Там нет ТЭГа img

Там есть класс .img

Ну, захотелось человеку

Link to post
Share on other sites

В 03.06.2018 в 09:15, red123 сказал:

<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } ?>

Разули, вы тоже посмотрите

 

В 04.06.2018 в 12:54, jaffagold сказал:

Ребята, разуйте глаза.

Там нет ТЭГа img

 Там есть класс .img

Ну, захотелось человеку

 

Link to post
Share on other sites

А причем тут логотип к фону всего хэдера?

Цитата

Добрый день. Подскажите пожалуйста как добавить в шапку (header) изображение так, что бы оно выравнивалось по центру при любом размере окна браузера.

пока все вот в таком виде, но не работает. Картинка есть но все время по левому краю выравнивается.  

 

html:

<header>
 <div class="img">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">

и т.д.

а потом стили

css:

.img {
  background-image: url(/image/hop2.jpg);
 background-repeat: no-repeat;

и т.д.

Где лого и где div.img

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.