I am learning CSS in Codecademy. I had already taken their HTML course so I knew about the center tag. However, now they introduced the CSS margin property. They also introduced the margin: 0 auto; property. From my knowledge, both do exactly the same thing. So is there any differences and when do I use each one or does it not matter? Thank You In Advance!
<center> is an depreciated tag. You should avoid using it. This tag is not supported in HTML5. CSS property is used to set the align of the element instead of the center tag in HTML5. An equivalent tag to <center> can be considered to be -
.center { margin: 0 auto; text-align: center; }
The main reason why <center> was depreciated was because it defines the presentation of its contents and not the contents itself. According to w3.org -
The CENTER element is exactly equivalent to specifying the DIV element
with the align attribute set to "center". The CENTER element is
deprecated.
So is there any differences and when do I use each one or does it not matter?
The above code snippet and <center> can be considered equivalent. Just using margin: 0 auto; can't always be considered the same though. See the below example -
<!DOCTYPE html>
<html>
<body>
<center>
<div>This is a div inside center</div>
</center>
<br>
<div>This is a div without any styling.</div>
<br>
<div style="margin: 0 auto;">This is a div with "margin: auto 0px;".Text not centered, doesn't work.</div>
<br>
<div style="margin: 0 auto;text-align:center">This is a div with "margin: auto 0px;".Text centered, works !</div>
</body>
</html>
Another point to consider is that The <center> tag is a block-level element, which means it can contain other block-level and inline elements and center them. Consider below example -
p {
width: 200px;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<!--p has a width of 200px given through css-->
<center>
<p>centers the element to page center</p>
</center>
<center>
<div style="margin:0 auto;text-align:center;">
<p>This one doesn't work here same as center tag </p>
</div>
<div>
<p style="margin:0 auto;text-align:center;">This one does</p>
</div>
</body>
</html>
As the W3Schools wiki describes here, the <center></center> tag is not supported by HTML5, although browsers will still work with it because of backwards-compatibility. Your best bet is to use the margin: 0 auto property.
Related
This question already has an answer here:
Why is an element with position: fixed moving with a non-positioned sibling?
(1 answer)
Closed 5 years ago.
I have two div elements inside a my body.
The first div is position:fixed, but when I add a paragraph to the second div, the first div moves down from the top of the page by ~20px.
How is adding a paragraph to one div, affecting the positioning of a previous div on the layout?
In the following code, there is one paragraph in the second div. This is the paragraph I am referring to.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
It's because you're not positioning the element anywhere vertically, because you're not setting any of its top or bottom offsets, thus placing it where it would be positioned if it were part of the document flow. This means it will align itself with the first element in the document flow, according to its margin.
That first element in document flow happens to be <p>.
The proper fix for your problem is setting top:0; on the fixed element. For a more detailed explanation please read the accepted answer of the question yours duplicates.
Other possible (improper, IMHO) "fixes" are adjusting the first element in document flow to start from the top of the document, by overriding the default margins of <p> to 0, or setting it's display property to inline-block (or any other inline type of display).
It's because p tags has a margin by default, so you just have to reset this margin using p {margin: 0;}. Here is the working example:
p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
</head>
<body bgcolor="#c0bbbb" style="margin:0;padding:0">
<div style="
background-color:#717777;
height: 50px;
width: 100%;
position:fixed;
padding: 30px;
">
<h1 style="color:#ffffff; margin: 0;" >WESBITE</h1>
<h2 style="color:#282828; margin: 0;" >This is a test website</h1>
</div>
<div>
<p align="center" ></p> <!--If I comment this out, the previous div is aligned properly-->
</div>
</body>
</html>
Why is it so difficult (or as one answer said, "It is not possible.") to center an arbitrary image horizontally? I have had centralized images working for several years; suddenly they sit obstinately at the left. Has there been some recent change in CSS that causes this?
I expect the code below, modified from the CSS DIY, to work, but it does not.
<!DOCTYPE html>
<html><head>
<style>
img { display:block; }
</style>
</head>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div style="margin: 0 auto;">
<img src="paris.jpg" alt="Paris"
width=15% >
</div>
</body></html>
I realize that scaling an image by percent width is (for no known) reason disallowed, but Jukka advised me to use it anyway, because it works in all browsers I have tried and does exactly what I want, which is to maintain image size proportional to page width. If I float the image right or left it works fine, and I can run a caption alongside the image, but the obvious 'margin : 0 auto;' fails, for no good reason I can see.
Margin : Auto
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins
Add
img {
display:block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>
<h2>Thumbnail Images</h2>
<p> ... </p>
<div>
<img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Paris" >
</div>
</body>
</html>
You should add the styles
display:block;
margin: 0 auto;
To your img element
<div style="width:100%;background:skyblue;">
<img style='display:block;width:25%;margin:0 auto;' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvl0jMbupgXjeP66hak-u3uwUPcqI3Ovx7zqiWkVhav2V8FjeY1A'/>
</div>
I am validating my html and I'm trying to fix:
Error: The align attribute on the div element is obsolete
And have tried using
<div style="text-align:center;">
But When removing the previous <div align="center"> and adding this new code, everything floats to the left of the viewport.
The use of this div is to center all content inside it, which contains nav bars, images, text etc.
What else can I try adding to align all this content and remove the mark-up error?
Thanks for reading!
Hope, this helps!
div{
text-align: center;
margin: auto;
}
Try aligning it in CSS
For example:
HTML
<div id="myDiv">My contents</div>
CSS:
#myDiv {text-align:center}
The attribute "align" that you were using is no longer present in HTML5. Use CSS instead: style="text-align:center;" for an inline CSS.
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>