I can’t center an image semantically

Asked

Viewed 9,439 times

3

How to leave an image in the center of the screen I tried to put one text-align:center and it didn’t work.

Follow 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>

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

html5 css3
  • 2

    It is also a tip to use: header img#logo-header{ display: table; margin: 0 auto; }

  • so friend and so the answer I marked as correct worked until then I searched the tags with the link that was passed to me because I used the tag center and it was replaced by tex-Algin center and I was given the answer with this good tag worked I do not know much of html and I’m asking for help and what is working milestone as a response but if you thought it was wrong I would like to see your answer so for me this right and it’s like you don’t know much of html css however if you think this incorrect would like me to showif the right shape =3

  • Jefferson’s answer is not wrong, let alone Jeremiah’s. The point is that Jefferson’s suggestion ends up adding more HTML content, and it is possible to center the image only with CSS (so much so that Jeremiah’s response received more votes!). But no answer is wrong! Even my suggestion also works!

2 answers

6

Create the following css rule:

header img{
        display: block;
        margin: auto;
    }

2


Do so:

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

  • friend enjoying his post and a good practice using the <center tag>????

  • 1

    Yes, the tag center was deprecated in HTML. http://www.devmedia.com.br/tags-e-attributedeprecated

  • I understood more then it is not very good to last it neh

  • "The <center> tag for example is commonly called the "lazy tag", as it is often used to center elements when they should have such an effect applied through a CSS style. In such a way, from the new specification its effect is abolished, including that of using it in conjunction with a table (<table>) to align it and its respective internal elements. Read more in: Deprecated tags and attributes in HTML http://www.devmedia.com.br/tags-e-attributedeprecated-na-html/28042#ixzz3abhrT13d"

  • These days don’t know

  • 2

    Hello @Kirito, if you are NOT using HTML5 there is no problem using it. However, it is not recommended to use code in depreciation, that is, HTML5 no longer exists. To see if a tag is in use or not, google the word tag + nomedatag for example tag center the first result is usually a page of W3schools back in session Definition and Usage the information whether or not it is depreciated.

  • That’s right. Legal @Kaduamaral

  • yes yes thanks for the help gave certim your code rsrs =3 from here 2 min I mark as reply

Show 3 more comments

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.