Can anyone tell me why me tag is not working with the following code?

Question

Can anyone tell my why my centre tag is not working? The css and html both are contained in the same code. First I tried to resolve the issue by using position as absolute, but I want a responsive webpage and want to keep the div (photo) in the centre of the page.

#photo-left {
  float: left;
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo-right {
  float: left;
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo {
  /*position: relative;
       top:150px;
       left: 35%;*/
  height: 180px;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
</head>

<body>
  <header style="position: relative;top: 100px;">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
      </ul>
    </nav>
  </header>
  <center>
    <div id="photo">
      <div id="photo-left"></div>
      <div id="photo-right"></div>
    </div>
  </center>
</body>

</html>

`` is depreciated and could stop working at anytime. Don't use it in new projects and update old projects that use it. **Note:** this is not the root of the issue. Just a friendly FYI. — hungerstar, Jun 20 '17 at 19:17

score 2 · Accepted Answer · edited Jun 20 '17 at 20:28

As mentioned in the comments by @hungerstar:

<center> is deprecated and could stop working at anytime.

If you want to know why it was deprecated you can take a look at this answer.

You can also see this reference from W3 for obsolete tags.

Question aside, in this case you can instead use a <div> and flexbox to achieve what you want with ease, you can do it like so:

.album {
  display: flex;
  justify-content: center;
}

#photo-left {
  float: left;
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo-right {
  float: left;
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo {
  height: 180px;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
</head>

<body>
  <header style="position: relative;top: 100px;">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
      </ul>
    </nav>
  </header>
  <div class="album">
    <div id="photo">
      <div id="photo-left"></div>
      <div id="photo-right"></div>
    </div>
  </div>
</body>

</html>

You could also take advantage of using flexbox in the #photo element instead, get rid of floats in the flex-items and an extra <div> element.

#photo-left {
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo-right {
  height: 180px;
  width: 140px;
  border: red dashed 2px;
}

#photo {
  height: 180px;
  display: flex;
  justify-content: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
</head>

<body>
  <header style="position: relative;top: 100px;">
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
      </ul>
    </nav>
  </header>
  <div id="photo">
    <div id="photo-left"></div>
    <div id="photo-right"></div>
  </div>
</body>

</html>

DevilaN · Answer 2 · 2017-06-20T19:24:00.193

1

There is no width defined for <div id="photo">, so it automatically expands to 100% width and there is nothing to center as it takes entire page width.

You can add background color for it, so it is more obvious.

Also instead of using center it is better to use margin: auto and defined width for div element.

Take a look at this fiddle: https://jsfiddle.net/jvtxf2em/

edited Jun 20 '17 at 19:24

answered Jun 20 '17 at 19:18

DevilaN

942
6
20

According to you then this might work

Since now the width is 100% and centre of that should be the centre of 100%. But unfortunately it didn't work. – Habib Ansari Jun 21 '17 at 10:30
@HabibAnsari: Paste full code (jsfiddle). We cannot discuss when there are so many unknown things like whether you are trying to center floating element or element without horizontal size. Also it seems that you are mentioning another problem. I've provided working solution with example code in jsfiddle. – DevilaN Jun 21 '17 at 10:36

score 0 · Answer 3 · answered Jun 20 '17 at 19:18

0

The center tag is not supported in HTML5:

https://www.w3schools.com/tags/tag_center.asp

answered Jun 20 '17 at 19:18

Ryan

579
1
5
17

While `` is depreciated, many browser still _"support"_ it for backwards compatibility with old sites. Also, this isn't the root of the issue, see **@DevilaN**'s answer. – hungerstar Jun 20 '17 at 19:19
The title of the question is "Can anyone tell me why me tag is not working with the following code?" This does answer the question, as the HTML doctype declaration is the HTML5 doctype. – Ryan Jun 20 '17 at 19:24
No it doesn't. Create a valid HTML5 page and browsers will center the content, [**example**](https://jsfiddle.net/br1acdav/). While the spec might not support it, browsers do for backwards compatibility of old sites. If the OP is using popular web browsers; Chrome, FF, IE etc. the example JSFiddle will have the content centered. Once browsers drop legacy support then this will be a completely valid answer as `` will likely be treated as a custom element. – hungerstar Jun 20 '17 at 19:36
@MikeMcCaughan Not picking up what you're putting down. I already commented on `` being _depreciated._ It doesn't center for the reasons that **@DevilaN** has pointed out in their answer. I'm not arguing terminology in the HTML5 standard. – hungerstar Jun 20 '17 at 20:05
@hungerstar Sure, I wasn't arguing your point, just your word choice. See [Why is there confusion between depreciated and deprecated?](https://english.stackexchange.com/q/45295). – Heretic Monkey Jun 20 '17 at 20:22
@MikeMcCaughan ah gotcha. My bad, should be/meant **deprecated** (no **i**). – hungerstar Jun 20 '17 at 20:26

Can anyone tell me why me tag is not working with the following code?

3 Answers3