Thanks, guys.
couple of clarifying questions:
@RbnJrg: So this looks basically like what I had, except the trick is using the "before" pseudo-element instead of a float. And because I'm completely ignorant of pseudo-elements, I'm not too angry at myself for missing this solution. I guess I'm going to have to read up on pseudoelements, now! Unfortunately, in the continuing spirit of that ignorance, I can't for the life of me figure out how to swap the content symbol for an image... All I get is either nothing or the text of the filepath! What am I doing wrong?
EDIT1: P.S. — oh man... these pseudo-elements are really going be the end of me... So much potential for OCD formatting tweaks...
PPS: Nevermind, i finally got it! content: url(filepath)... Unfortunately, now I can't figure out how to define the image height.... The pseudo element image doesn't seem to respond to height values...
EDIT2: Okay, so this is what I got after some digging:
Code:
.centerLeft::before {
background-image: url(../Images/00.jpg);
background-size: 2em auto;
display: inline-block;
width: 2em;
height: 2em;
content:"";
}
This appears to work, but i don't know if this is so juryrigged that it will actually fail in a real ebook display? Is this too duct-taped-together, or would it work?
@Turtle91: When I first reproduced the code, this is what I got:
With a little poking, I figured out that it was the container width that was causing the 2nd line to break, which i changed to 60%. However, no matter how you slice it, the text isn't actually automatically centering in the page. So for example, if i expand the window (keeping your original 50vw) you'll see:
Is having to set the viewport width relative to the physical width of the viewing window just an unavoidable feature of this solution, or is there a way to make it automatically center for any length of text?