By Arkansas Dude on

I've got a quick question that hopefully will be able to be answered very quickly and effortless.

I'm using Drupal 5.7 with the garland theme, and I haven't modified many of the settings. I installed the Members module and created a user list with it. In the user list, the images (which are the uploaded profile pictures) are aligning to the right. I would like them to be center aligned; how do I do this?

Also, to a lesser extent, I would appreciate it if anyone could say how to center align the rest of the content in the user list generated by the Members profile, but I'm mainly concerned with the images for now.

Thanks.

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

use the firefox browser with the firebug addon to narrow down what css is needed and where it will need to be placed.

_____________________________________________________________________
My posts & comments are usually dripping with sarcasm.
If you ask nicely I'll give you a towel : )

lrickard’s picture

lrickard commented

The Drupal engine doesn't really control center alignment. You want to edit the stylesheet for your theme:
{ width : some_number; margin : auto; }

I've never used the Members module, but View Source for the page, and see if it wraps a div, or some other style-able HTML element around the information you're trying to center.

Arkansas Dude’s picture

Arkansas Dude commented

Thanks for the help so far. I haven't figured it out completely, but the Firebug plugin provides a lot of useful information.

I get < div class="picture" > for the picture when inspecting it with Firebug.

lrickard’s picture

lrickard commented

Okay, then you're going to want to look in your themes/garland directory. Open up style.css and search for
.picture
If it's not there, add it in! Then you can style it however you like. I don't know where else that class of div is used -- I have a feeling it shows up anywhere there is a picture associated with a user. So changes you make may show up on other pages as well.

nevets’s picture

nevets commented

You can speed up finding the appropriate css with firebug. In the html pane select the div (click on it) and the style pane will show the css that applies and where it comes from.

Arkansas Dude’s picture

Arkansas Dude commented

Yeah, I found it.

.picture, .comment .submitted {
float: right;
clear: right;
padding-left: 1em;
}

Thanks. Now I just need to put in the CSS code to center align it, I guess.

lrickard’s picture

lrickard commented

Don't be afraid to split .picture out from those other classes, if you want to preserve the right alignment for them. Instructions from the W3C on centering images and text in CSS, below:

http://www.w3.org/Style/Examples/007/center

Arkansas Dude’s picture

Arkansas Dude commented

Got it all figured out. Thanks everyone for helping.