Don't know how to center an image...

User 404575 Photo


Registered User
887 posts

Hi gang. :)

The page in question is at http://denverprocessservers.net/volume-discounts.html

I've been stumped with this, all afternoon, getting frustrated.

http://validator.w3.org/check?uri=http% … 2Fservices

Validator says:

Validation Output: 1 Error

Error Line 69, Column 20: The align attribute on the div element is obsolete. Use CSS instead.

<div align="center"> <img src="images/FEESFORVOLUMESERVES-PUBLISHED.jpg" width=…

I also wanted to center that menu item at the top, but ran into the same issue.

Yeah, I don't know what I'm doing, and am at a basic level. I'm using HTML Editor and it's still inserting the above code when I do an align center on the image code.
Melissa Rhiannon
OS Windows 10
User 2147626 Photo


Ambassador
2,958 posts

Just got to ask ... you have the latest version ( 14.1 ) of HTMLeditor ?

Try this ... http://www.w3schools.com/tags/att_img_align.asp
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 271657 Photo


Ambassador
3,816 posts

To center your home button:
nav {
clear:both;
display:block;
padding:10px 5px;
width:400px;
text-align:center;
margin:auto; <<<left-right margins are auto, top-bottom can be different
}

Use the same margin rule for the bottom image. ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 404575 Photo


Registered User
887 posts

Gunsmoke wrote:
Just got to ask ... you have the latest version ( 14.1 ) of HTMLeditor ?


No, they apparently arent upgrading from 12 anymore, which is what I have - the latest of 12



OK, let me go see...thanks...
Melissa Rhiannon
OS Windows 10
User 404575 Photo


Registered User
887 posts

paintbrush wrote:


margin:auto; <<<left-right margins are auto}

Use the same margin rule for the bottom image. ;)


Hey THANK YOU! It appears to have worked for BOTH!

nav{clear:both;display:block;padding:10px 5px 0;width:400px;text-align:center; margin:auto;}

<div> <img src="images/FEESFORVOLUMESERVES-PUBLISHED.jpg" width="872" height="227" alt="" title="" ></div>

Melissa Rhiannon
OS Windows 10
User 271657 Photo


Ambassador
3,816 posts

:)
Another thought...
In your style sheet you have a class for center. Add the margins to it:
.center {
text-align: center;
margin: 10px auto;
}
Then for your image:
<div class="center">....</div>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 404575 Photo


Registered User
887 posts

Not sure I understand that one enough, but thanks Paintbrush.
Melissa Rhiannon
OS Windows 10
User 404575 Photo


Registered User
887 posts

Is HTML Editor 14 set up to do HTML5 W3 compliant code? If so, what's the upgrade cost from v12?
Melissa Rhiannon
OS Windows 10
User 103173 Photo


VP of Software Development
0 posts

Melissa Rhiannon wrote:
Is HTML Editor 14 set up to do HTML5 W3 compliant code? If so, what's the upgrade cost from v12?

If you did not upgrade during one of the many specials that we offered, you would just purchase the latest version directly from our website at www.coffeecup.com/html-editor
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 271657 Photo


Ambassador
3,816 posts

This is in your css file (<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>):
.center {text-align:center; }
You can add the margins to it:
.center {text-align:center; margin: auto; }
Then for anything that needs to be centered, add that class.
Examples:
<p class="center">
<h1 class="center">
<div class="center">
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.