Is there a way to align things a set # of pixels from center?

I want to set an image a few pixels right of center. Is there a way to do this?

I don't want to use a percentage(say 60%). Because I have too objects that I want to align from center. If I use a percentage instead of pixels the objects will appear farther apart form eachother on larger displays.

Originally I had an image that was text anda rocket. Now I'm trying to just have the rocket as an image, so that the image that has to be loaded is smaller.

I'm having difficulty getting the title and image to be beside eachother in the center of the page.

Any suggestions?

 

id do it:

<div style="width:50%;float:left;">Div 1</div</div>
<div style="width:100px;float:left;margin-left:10px;">Div 2</div>

Place your stuff inside div2, and leave div 1. its juts a space filler that fills up the left side.

 

hmm.. I can't get that to work.

This is what I have in my css at the moment:

#h1 { font-size: 2.6em;
color: #ffffff;
background: url(images/boldlygotitle.png) 70% no-repeat;
text-align: center;
}


#h1 h1 a {text-decoration: none;
color: #ffffff;
letter-spacing: -3px;
font-size: 2.6em;}


#h1 a:hover {text-decoration: none;
color: #ffffff;}
​

 

do u want to align an <h1> inside a div with id="h1"????

What I gave you works... it sets a div on the left half of the screen and on the right sets another with width 100pixels, and 5pixels off the center.

you can try doing this, which just splits the page in two.

<div style="width:50%;float:left;text-align:left;">Div 1</div>
<div style="width:50%;float:right;text-align:left;">Div 2</div>

Placing stuff inside Div 2 will align stuff to the immediate right of the "center-line" of a page. Give the things inside this Div 2 a margin-left and they will be the "set" amount of pixels right of the center.

 

I only want to get it to work. .

Sorry for my ignorance, I don't understand what you are asking.

This is supposed to go in my css right? Just making sure because the only divs that I have are in my php files.

I tried placing the image in the Div 2 section. The image stopped showing up on my site.

 

try this just in case you are floating other divs.
<div style="width:100%">
<div style="width:50%;float:left;text-align:left;"></div>
<div style="width:50%;float:right;text-align:left;">
<img src="IMAGE URL HERE" alt="" style="margin-left:5px;"/>
</div>
</div>

if that doesnt work, post your website with my code in it so I see wher eit is and what is causing it not to work.

 

You can set a width to your box, set it to

margin:0 auto;

Code (markup):

and give it a position relative of X pixels.

#box {
   width:300px;
   margin:0 auto;
   position:relative;
   left:Xpx; /* This can be right if you want. Doesn't really matter */
}

Code (markup):

 

He said he didnt want them centered because hed put other stuff and the spacing would be wrong...

something like that.

 

Uhm..It's not centered. It is offset. It's centered using margin:0 auto; but then you offset it by how many pixels you want from the center using the combination of position:relative; and either left:XXpx; or right:XXpx;

Regards,
Nick

 

Yes, the element itself is centered and then it is visually offset (looks like it's off-center now, though not really).

However, I noticed that the original code posted by BoldlyGo had only text-align: center, so unless margin: 0 auto was not used because he didn't really want it centered exactly, I dunno, but it occured to me there might be no doctype or one with something above the doctype like a space or text or something... in which case, at least in IE (even IE7) margin: 0 auto won't work... so, make sure there's a doctype too : ) or the technique Nick posted won't work.