I can not centralize a picture semantically

3

How to leave an image in the center of the screen I tried to put a text-align:center and it did not work.

Here is my html code:

<header>
      <img src="images/bg-header.png" id="bg-header">
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Cases</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Orçamento</a></li>
                <li><a href="#">Contato</a></li>            
        </ul>

      <img src="images/web-sky-logo.png" id="logo-header">
</header>

Note: The image I need to rename and the one with id="logo-header" and it has to be centered in Google Chrome, Safari and Mozilla.

    
asked by anonymous 19.05.2015 / 19:27

2 answers

2

Do this:

<header>
      <p class="text-center"><img src="images/bg-header.png" id="bg-header"></p>
        <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Cases</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Orçamento</a></li>
                <li><a href="#">Contato</a></li>            
        </ul>

      <p class="text-center"><img src="images/web-sky-logo.png" id="logo-header"></p>
</header>

CSS:

.text-center{
  text-align: center;
}
    
19.05.2015 / 19:34
6

Create the following css rule:

header img{
        display: block;
        margin: auto;
    }
    
19.05.2015 / 19:38