Center Alignment (for text & images)

  • jschwim

    (@jschwim)


    6 years, 6 months ago

    Hi,

    I’ve been having issues with center-alignment in relation to text and images (including an embedded spotify player (http://www.anders-asker.se/music/).

    I was able to fix the text alignment by going into the HTML of the block and adding a “<center> /center>” code, but I’m not able to do the same thing for the images. After a google search I saw solutions suggesting the addition of the following code the CSS. These fixes also failed to provide a fix. Does anyone have any other solution?

    Example of posted text in CSS

    }.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    display: block;
    }.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
    display: block;
    text-align:center;
    }.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.is-resized>figcaption{text-align:center;}
    .wp-caption .wp-caption-text {
    text-align: center;
    }

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • mrtom414

    (@mrtom414)

    6 years, 6 months ago

    You shouldn’t modify the theme itself. If you want to center the image you can simply add code like this to the image css. 

    display:block;
margin:0 auto;

    If you want to center text you would do it with the text-align:center;

    if it a section or items you want to center you can use either grid or flex box;

    to align in either of this you would use the command justify-content to align horizontally or align-items to align vertically.

    example of flex box would be

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;

    Thread Starter jschwim

    (@jschwim)

    6 years, 6 months ago

    Apologies, I’m still a novice. When you say the image CSS that’s differen than the HTML? How would I access or where would I go to find the image CSS?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Center Alignment (for text & images)’ is closed to new replies.

Tags