Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Centering Paragraph (with Image) In Its Grandparent Container (Taking It Out Of Its Parent)
10 views
Skip to first unread message
SMH
Apr 25, 2013, 1:47:29 PM4/25/13
to
This is about getting images larger than the width of a column of justified
text to center beyond the width (left and right margins) of the text column.
What I use works: I just want to know if it can be done better (less
effort, less markup, benefits of long experience).
I have a simple format in which the DIV(class="content-div") element
containing all content (text, images, etc) is centered within the BODY
element by using
.content-div {
margin:0 auto;
width: 40em;
}
The value for 'width' property will vary.
Very often, I put in IMG elements (as figures within the text) and the image
is large and I don't want it re-sized.
I have two different ways of doing this, which are shown in markup examples
#1 and #2 at the bottom of this post.
I want to know from you if there is an easier, never-fails, altogether
smart-and-eloquent third way of doing this.
I believe the two different ways I am doing it are classical, with #1 a more
sure way to do it.
With markup example #1, the image is taken out of the DIV.content-div
container and put into its grandparent container (the BODY element) and
centered within it.
With markup example #2, it remains within the DIV.content-div container, but
is centered by using the margin property within the style attribute to
introduce negative-percentage value left and right margins to achieve
centering (real rookie stuff?).
Okay...is there a better way?
============ markup example #1 begins ===========
<!-- optional etagos not used; would validate in HTML 5 -->
<body>
<div class="content-div">
.
.text
.
</div> <!-- break in the text flow -->
<p class="img-p">
<!-- make this selector have 'margin:0 auto;' for centering with body -->
<img src="an-image.png" alt="description">
<div class="content-div">
.
.resuming the text flow
.
</div>
</body>
============ markup example #1 ends ===========
============ markup example #2 begins ===========
<body>
<div class="content-div">
.
.text
.
<p style="margin:1em -20%;">
<img src="an-image.png" alt="description">
<p>
.resuming the text flow
.
</div>
</body>
============ markup example #2 ends ===========
Chris F.A. Johnson
Apr 25, 2013, 3:09:14 PM4/25/13
to
On 2013-04-25, SMH wrote:
>
> This is about getting images larger than the width of a column of justified
> text
Justified text? Eeewww!
>
> This is about getting images larger than the width of a column of justified
> text
> to center beyond the width (left and right margins) of the text column.
>
> What I use works: I just want to know if it can be done better (less
> effort, less markup, benefits of long experience).
>
>
> I have a simple format in which the DIV(class="content-div") element
> containing all content (text, images, etc) is centered within the BODY
> element by using
>
> .content-div {
> margin:0 auto;
> width: 40em;
> }
text elements).
...
<p>
.text
</p>
<p style="margin:1em -20%;">
<img src="an-image.png" alt="description">
</p>
<img src="an-image.png" alt="description">
<p>
.resuming the text flow
.
</p>
.resuming the text flow
.
</body>
--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>
Danny
Apr 25, 2013, 3:16:32 PM4/25/13
to
To SMH
I'd think it'd be better if you give us a mock up of what you have so far, and what you want. Just make a quick picture or a snapshot with annotations, so we can tell what it's. Thus far it sounds you're just referring to "supporting" images next to the text.
I'd think it'd be better if you give us a mock up of what you have so far, and what you want. Just make a quick picture or a snapshot with annotations, so we can tell what it's. Thus far it sounds you're just referring to "supporting" images next to the text.
0 new messages