/    Sign up×
Community /Pin to ProfileBookmark

Y doesn’t my image appear in the centre?

Copy linkTweet thisAlerts:
Apr 14.2006

<html>
<head>
<title>My Own Webpage!</title>
</head>
<body>
<h2>Welcome to my webpage</h2>
<p>Coming soon will be my completed webpage that will wow and impress you!</p>
<p>
<img src=”avon.jpg” align=”center”>
Lipstick: <input type=”radio” name=”food” align=”center”/></p><br><br>
<p>
<img src=”avon.jpg” align=”center”>
Foundation: <input type=”radio” name=”food” align=”center”/></p><br><br>
<p>
<img src=”avon.jpg” align=”center”>
Mascara: <input type=”radio” name=”food” align=”center”/></p>
</body>
</html>

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@lisgilauthorApr 14.2006 — Sorry meant to say I've been using a tutorial but when I try to put the images in the centre of the screen, they stay to the left and I can't figure out why! They'll go to the right!
Copy linkTweet thisAlerts:
@David_HarrisonApr 14.2006 — Here's an example of how to create that page using CSS, instead of deprecated attributes such as align.

I have also included many other things in the example, such as a DOCTYPE, which is required on every page, if your tutorial didn't teach you that, then it's almost certainly a bad tutorial. At the same time it looks like it's trying to teach XHTML as well, judging from the closing slash on the <input>'s, but it didn't get the point accross very well, because there's no closing slash on the images.

I would recommend a different learning resource. Elizabeth Castro's HTML for the World Wide Web with XHTML and CSS, 5th edition. It's what I bought when I was learning and it was (and still is) very good.

[upl-file uuid=0e537eef-2b83-4fed-b4d8-ed42d2ffacdd size=2kB]lisgil.zip[/upl-file]
Copy linkTweet thisAlerts:
@skilled1Apr 14.2006 — because no browser will reronize <img align="center"> either wrap it like this <center><img src=""></center> or in a div <div align="center><imgsrc-""></div> or even in a table <table align="center><tr><td><img src=""></td></tr></table>
Copy linkTweet thisAlerts:
@felgallApr 14.2006 — <center> is dead

<div align="center"> is deprecated

<div style="margin:0 auto"> is the modern code for centring something.

<img align="center"> is telling the browser to place the adjacent text next to the centre of the image rather than aligning it to the top or bottom.
Copy linkTweet thisAlerts:
@David_HarrisonApr 14.2006 — Please don't do what skilled said, align is a deprecated attribute and <center> is a depracated element. Also, using tables for layout is an accessibility concern.

If you want to centre something then apply this attribute to the parent element:style="text-align:center;"Or if there's already a style attribute there, just add the text-align:center; rule to it.

However, that will ONLY work with block level elements (ie: elements that will expand to 100% of the available width unless you actually specify a width).

Unfortunately I feel that you may not grasp what I'm saying here and will therefore just do what skilled1 suggested, so as a last ditch attempt I'll suggest another way to centre something. It's almost exactly like the center element, but it's not deprecated.&lt;div style="text-align:center;"&gt;WHATEVER YOU WANT TO CENTRE HERE&lt;/div&gt;Please believe me what I say, CSS is the way to go, and that book I recommended will show you how. If you get that book, you'll have a good foundation of HTML and CSS to build on within a week.

Edit: margin:0 auto; will only centre block level elements that you have specified a width for. text-align:center; will centre inline content inside a block level element, regardless of whether or not the block level element has a width or not.
×

Success!

Help @lisgil spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...