how to center an image?

konst2010sf's picture

konst2010sf
December 3, 2010
12:21am

Please help me with centering an image. I switch to a Full HTML mode, the center button appears on the menu, the image gets centered, but when I save the page it's aligned to the left. When I double click on the image properties there are only two alignment options - right and left, but where is center?

Tried using a table (width 100%, 3 columns, one row, alignment center) and putting the image in the center cell. Again after saving the image is aligned to the left.

 

Any ideas what to do?

Thanks

Status: Resolved

Comments

Moderator
George Cassie December 3, 2010
1:01pm

Hi konst,

It's probably related to the text format. They can strip out some HTML elements during display even if they display in the WYSIWYG editor.

Could you link me to a specific piece of content so I can take a look?

George Cassie
Gardens Advisory Team

konst2010sf December 3, 2010
3:45pm

George,

 

I appreciate your help. This is the page, I'd like the picture to be centered.

http://1c.drupalgardens.com/content/application-and-scalability-servers

If you can figure it out somehow please let me know how.

 

Thanks,

Konstantin

Moderator
George Cassie December 3, 2010
3:58pm

Hi Konstantin,

It looks like there's a div being placed around the image which is preventing the styling from taking place. Try placing this in the Advanced tab of your theme:

#styles-1 {
  text-align: center;
}

If that doesn't help, please let me know and we'll investigate further.

George Cassie
Gardens Advisory Team

konst2010sf December 3, 2010
4:16pm

It did help in most cases, but I still can't center the second picture on this page

http://1c.drupalgardens.com/content/script-and-query-language

My theme is copied Minima, I didn't make any changes to it (but the one you recommended).

If you could take a look at this problem too, I'd appreciate it.

Thanks

konst2010sf December 3, 2010
6:03pm

There is some kind of a bug. Even if you put just two images on a page (HTML below) and center them, the first one is centered, but the second one is aligned to the left.

 

<p style="text-align: center; ">[[{"type":"media","view_mode":"media_large","fid":"62","attributes":{"alt":"","class":"media-image","title":"","typeof":"foaf:Image","wysiwyg":"1"}}]]</p> <p style="text-align: center; ">[[{"type":"media","view_mode":"media_large","fid":"47","attributes":{"alt":"","class":"media-image","title":"","typeof":"foaf:Image","wysiwyg":"1"}}]]</p>
Gardener
Tone December 4, 2010
2:15am

Hi Konstantin

Try the method on my Tips page at http://tgt.drupalgardens.com/tips

Tony

konst2010sf December 4, 2010
3:11pm

Tony,

It did solve it.

Thanks and have a great weekend!

konst2010sf December 4, 2010
3:11pm

resolved

stmarysstaff March 3, 2011
3:27pm

The Tips page is not available!

konst2010sf March 4, 2011
1:11am

 

I had a copy saved:

http://tgt.drupalgardens.com/tips

 

The Stylesheet Classes field contains text that isn't needed. Click anywhere in the field and either pressCtl/Cmd + A, or right click then left click Select all. Then press the Delete or Backspace key. The field is now empty.

I now put in the text I want. I enter one of three short strings below - these become Class IDs. If you don't know what that means, don't worry. You don't need to for this. 

  • To position an image on the left I enter: imgupl_float_left
  • To position an image on the right I enter: imgupl_float_right
  • To position an image in the centre I enter: imgupl_centre

 

 

/* to float images right */

img.imgupl_float_left {

  float: left;

  border: 5px #ffffff ridge;

  margin: 0 25px 10px 0;

}

/* to float images right */

img.imgupl_float_right {

  float: right;

  border: 5px #ffffff ridge;

  margin: 0 0 10px 25px;

}

/* to centre images */

img.imgupl_centre {

  display: block;

  margin: auto;

  border: 5px #ffffff ridge;

}

mhibbe April 1, 2011
5:05pm

i have to put

 

 

/* to centre images */

img.imgupl_centre {

  display: block;

  margin: auto;

  border: 5px #ffffff ridge;

}

 

 

at "Apperance - Advanced -CSS", right?

It's working, but i was not sure if there's another place where to define css?

Gardener
Tone April 2, 2011
2:58am

Yes that's the correct place for your css, mhibbe.

Think of Advanced CSS as Administrator's CSS or Custom CSS. It's the means DG provide for us to enter our own css that is saved to a style sheet called advanced.css. It's the only DG style sheet we can write to.

Tony

r0bm1lls June 22, 2011
3:48am

There is a patch for the media module which fixes the image positioning.

http://drupal.org/node/1043570#comment-4258282

Seems to me best to rather get the modules working properly than hack css.

for what its worth.

Rob

jimbob54 August 15, 2011
6:17pm

I've been struggling with Drupal for about 9 months now (you'd think I'd have learned something by now) ... it continues to amaze me how difficult it is to work with images - even to do simple things like centering an image. I see no reason why anyone should have to write CSS to center an image. I find it hard to imagine the user base continuing to grow if Drupal doesn't improve ease of use issues like this.

r0bm1lls August 17, 2011
12:41am

Patching the module fixed it for me. If you send me an email adress I can send you the patched module. See me comment above.

r0bm1lls August 17, 2011
12:43am

In fact I am surprisd that the Drupal gardens guys have not fixed this module in their base install. George?

Moderator
Sara Roy August 18, 2011
10:04am

Hi everyone,

While there is not current ETA for this feature, it is something that we are working towards and is being tracked internally as AN-27532.  I've added your votes and comments here.

Thank you for your input,

Sara Roy

Drupal Gardens Client Advisor

This topic has been closed to further comments.

Feedback