Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Centering Images in the Passage Over a Background Image

Format: Sugarcane

So I removed the sidebar and vertical bar and fixed the margins and padding, all using CSS, so I'm starting from a blank slate in Sugarcane.  So far so good.  I added a background image and the following CSS in a separate stylesheet from my main stylesheet (because I wanted to tag certain passages with this background, but not all passages):
html,body {
background: [img[stars]] no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.passage {
font-size: 14px;
color: #000000
}
So far, so good.

I then went to add an image over the background image (in other words, I have a bunch of text, and then I have an image, and then I have more text, all set over the background image) and used <center> tags around the image because I wanted it centered on the screen.  I also used <center> tags around the text.

The text was centered, but the image floated to the right.  I haven't been able to figure out how to fix this.  Is there a way to set in the CSS so that all images added in passages (vs. the background image) are centered?  I want to use a few images, and I always want them centered, though I don't always want the text centered.

Comments

  • Have you tried something like:
    .passage img {

    ~relevant declarations for centering~

    }
    My rough solution has been giving stuff fixed positions that are close to center where I want them, but since that doesn't scale greatly, I don't think it'd be good to recommend. Nevertheless, I think this is how you'd call images in your passages that aren't backgrounds for giving them different positions/alignments like centering. Hope that kinda helps get you closer to what you're trying to do, sorry I'm not of much more help than this. =)
  • Just tried this centering.  Didn't work.  Though increasing the passage width to 1000 px (from 800px) worked.  Though not sure if that will work everywhere or just on my screen.  Still playing with this.
  • I am assuming that your resetting the default layout of the page using CSS like this:

    /* Reset page layout */
    body {
    margin: 4em;
    }
    #sidebar {
    display: none;
    }
    #passages {
    margin-left: 0;
    border-left: 0;
    padding-left: 0;
    }
    And then setting up the default and Retina background images (and default passage font/colour) like so:

    /* Default styling */
    html,body {
    background: [img[stars]] no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    .passage {
    font-size: 14px;
    color: #000000;
    }

    /* Retina styling */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    html,body {
    background: [img[stars_2x]] no-repeat center center fixed;
    }
    }
    So assuming your passage content looks something like the following:

    The text before the image.......

    [img[someimage]]

    The text after the image.......
    One way to center the image using CSS is:
    (note: place this CSS just before the /* Retina styling */ comment in the previous CSS example.)

    #passages img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
  • The only thing I had different was margin: 0; instead of margin: 4em; under body.  When I tried using 4em, it pushed it out of alignment.  With 0, everything is centered. 

    The background and text looks great on all computers.  It's just mobile devices. 

    Still plugging away at this.
  • cressidahubris wrote:

    The only thing I had different was margin: 0; instead of margin: 4em; under body.  When I tried using 4em, it pushed it out of alignment.  With 0, everything is centered. 

    The reason I gave margin a value is that some people have problems reading text that starts/ends flush against the edge of a screen.
Sign In or Register to comment.