centering text & images...

How do you center text and images within columns. The <center> tags appear to be ignored?

  • Jed.. why not do it in the css files (text-align: center;), this of course would center any content whether it be text or images.

    -Carlos

  • @carlos

    Thats the trouble it would center everything in that column where as all I want to do is to get an image in the center of a columns text entry and leave the text as it usually is... a margin: auto would also center everything as well I think?

  • @Jed..

    Well, 'margin: auto;' would center the object itself but not the content of it, while 'text-align: center;' would center the content but not the object itself.

    Now, there are a few things we need to know first, is this going to be a global style?? Ie, do you want this to happen every time you add an image into that column? And, is the image going to be inserted amongst text or on a paragraph of its own with text above and below?

    I'm not sure if this is what you are trying to achieve, but here's an idea:

    'Text Text Text Text Text Text Text Text Text Text Text ...'

    <p style="text-align:center;"><img src="myImage.gif"></p>

    'Text Text Text Text Text Text Text Text Text Text Text ...'

    This can be hardcoded and made global by adding a new class in css and use it globally.
    Does this help?
    -Carlos
  • That helps a lot Carlos and ideal solution would be that elgg actually took notice of any code like this instead of just ignoring any positioning elements and leaving any image parked at the left-hand-side of  the columns.

  • Glad to hear that helps.. If you want to apply centering to all images to the column in question, then I suggest you do this:

    In the css file, locate the column.. (for this example I'll call it myColumn), then add an img selector with style to the column.. Example:

    #myColumn { this is the existing css properties }

    *Then we add:

    #myColumn.IMG {margin: 20px auto 20px auto}

    Html: <div id="myColumn"><img src="myimage.gif"></div>

    That's how I would do it.

    Cheers.

    -Carlos