Center Image

Center Image

January 16, 2017
 Marilyn

  • Marilyn
    Senior Member 100 points

    What is the CSS code to center an image. ‘Extra Class’

    Just know HTML <center> doesn’t work. :)

    Looked at Media file and don’t see ‘center’ option there.

    Thanks! M*

    Attachments:
    You must be logged in to view attached files.
    January 16, 2017 at 9:00 pm
  • JamesD
    JamesD
    Titan 749 points

    Hello Marilyn,

    If you could post a URL to the page (where the image is) then it’ll be easier for someone to appropriately help you with a solution.

    January 17, 2017 at 5:46 am

  • Marilyn
    Senior Member 100 points

    The URL is: http://www.doranglemarketplace.com/about/

    The first image is inserted using PP Page Builder and the “Image” option. It is NOT centered.

    The second image, which is centered, is inserted in a PP Page Builder “Text” block as HTML code.

    I can do first image like the second image, HTML code in a text block, but I would like to know how to center when using the “image” object option.

    Thanks. Marilyn*

    January 17, 2017 at 4:34 pm
  • JamesD
    JamesD
    Titan 749 points

    Hello Marilyn,

    None of the settings will center the image. The “Extra Class” setting is to put your own styling class name that should be applied to that image div element.

    The easiest way to accomplish what you want would probably be to add CSS to your styling like:

    .pt-image img { margin: 0 auto; }

    Looks like you had the right idea. Make sure the Extra Class setting is empty.

    If you wanted to use the Extra Class setting method, then you can use something like “center-img” (what ever you wanted to name it) in that setting then in your styling sheet you would use:

    .center-img img { margin: 0 auto; }

    If you don’t have a custom stylesheet already, then you should be able to add the styling to the “Theme Setup >> General Setup >> Custom CSS/Javascript” section.

    Does this make sense?

    January 17, 2017 at 8:02 pm
    This reply was awarded the best answer by the topic poster.

  • Marilyn
    Senior Member 100 points

    I think so. I will work on it and see how I do. :)

    Thanks so very much for your time. Marilyn*

    January 17, 2017 at 9:11 pm
  • Aaron
    Aaron
    Super Guru 916 points

    Bootstrap already has a helper class for this: center-block

    So your code would be:

    meet-people-sm-dorangle

    January 18, 2017 at 2:18 am
  • Aaron
    Aaron
    Super Guru 916 points

    Bootstrap already has a helper class for this: center-block

    So your code would be: (edit forum bbcode all screwy.)

    add center block to your class: =”img-responsive center-block”

    January 18, 2017 at 2:19 am
  • Jason
    Jason
    Titan 771 points

    Great to see

    August 12, 2017 at 11:25 pm
Viewing 8 posts - 1 through 8 (of 8 total)

Didn't find what you were after?

Chat with us now

or contact our support team