Center Image


  • 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.

    JamesD
    JamesD
    Elite Member
     
    427 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.



    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*


    JamesD
    JamesD
    Elite Member
     
    427 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?

    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*


    Aaron
    Aaron
    Guru
     
    859 points

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

    So your code would be:

    meet-people-sm-dorangle


    Aaron
    Aaron
    Guru
     
    859 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”


    Jason
    Jason
    Elite Member
     
    602 points

    Great to see


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.