[guyfromri]

Hey guys!

So, I'm playing with an idea to add a wrench image next to some of the text in my site to edit that field. It all works great but I'm having some writers block on the CSS.

When I add just the text, it centers in the DIV and everything is duckie. When I add the wrench, it pushes the text over. I've thought about div sizing but that doesn't guarantee center text so that would be hard to do. What I'm thinking now is positioning the text so it's affected by the parent div and trying to position the image so it floats to the right of the centered text. Positioning however, is not my strong suit so I thought my colleagues here wouldn't mind giving me some feedback!

Here's what I have so far

Heres the text that I want centered

#UserName{
  float: left;
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

I really don't have any CSS for the links/images here because I didn't need any formatting other than positioning (I don't think)

As always, thanks in advance!!

[BenignDesign]

Where do you want the image to display? Behind the text? Next to the text? Inline with the text? Below the text?

What is the HTML markup you're using in conjunction with the above CSS to accomplish your goal?

[guyfromri]

Sorry -- I think quicker than I type

I lied too -- I forgot that I wrote this little class for the images

.MiniEdit{
  float: left;
  height: 15px;
  margin: 0 2px;
  border: 0;
}

My goal is to have the text centered in the DIV then where ever that text may end have a small margin and my image right there to the right.

Here's the HTML I'm using to populate the page

<div id='UserName'>$MyName
<a href='http://mysite.co/beta/scripts-php/GB_pages/gb_update_primary_email.php' title='Edit display name' onclick='return GB_showCenter(\"Edit display name\", this.href, 500, 500)'><img src='http://mysite.co/beta/images-int/2.0_Icons/wrench_48.png' class='MiniEdit'/></a>
</div>

Thanks!

This post has been edited by guyfromri: 27 August 2012 - 10:19 AM

[BenignDesign]

The image won't appear to the right below the text because you have it floating to the left.

[guyfromri]

Lets say my div is 300px wide and the text takes up 100px(could be anything)...

My goal is to have 100px left of the text then 100px right of the text.

Then in the right, regardless of what it is, I want to add a wrench image, inline with the text, that doesn't affect the centering of the text. I just want the text 100% centered then the image to be inline, next to the text...

[BenignDesign]

You could accomplish that by getting creative with line breaks and non-breaking spaces. Or doing uber nested divs. But adding the image to the end of the text will always kick the last line over, out of the centered alignment.

I'm thinking multiple divs would work better for you here. 3 columns at 100px each. Your text remains centered in the middle column while your wrench displays in the right column without disrupting your text layout.

[guyfromri]

That's an awesome idea. Thank you! I'm going to go play with this