|
Image Alignment
| [Previous] [Main] [Next] |
|
| |
| Images can be aligned with respect to surrounding elements using the htmlImage::Align() and htmlImage::VAlign() methods. These methods correspond to the ALIGN and VALIGN attributes of the HTML standard, and enable images to be embedded into the flow of text.
| |
|
| |
| While the HTML specification provides just three attributes for aligning images (top, middle, and bottom), Netscape Navigator and Microsoft Internet Explorer allow six more alignment options (left, right, texttop, absmiddle, baseline, and absbottom). html++ offers these same alignment options in the Alignment and VerticalAlignment enumerations:
| |
|
| |
| typedef enum {
| |
| align_default = 0,
| |
| align_left,
| |
| align_center,
| |
| align_right,
| |
| align_justify
| |
| } Alignment ;
| |
|
| |
| typedef enum
| |
| {
| |
| valign_default = 0,
| |
| valign_top = align_justify + 1,
| |
| valign_texttop,
| |
| valign_middle,
| |
| valign_bottom,
| |
| valign_baseline
| |
| } VerticalAlignment ;
| |
|
| |
| Most browsers normally insert images so that their bases align with the baseline of the text on the same line (e.g., valign_bottom). However, it's always a good idea to specify the desired vertical alignment.
| |
|
| |
| The example below shows how to align an image against the left side of a page.
| |
|
| |
| htmlImage logo( "/images/logo.gif" ) ;
| |
| logo.Align( align_left ) ;
| |
| page << logo
| |
| << "This text wraps around the image" ;
| |
|
| |
| |
|
| |
|
| |
| The following example shows how to align an image against the right side of a page.
| |
|
| |
| htmlImage logo( "/images/logo.gif" ) ;
| |
| logo.Align( align_right ) ;
| |
| page << logo
| |
| << "This text wraps around the image" ;
| |
|
| |
| |
|
| |
|
| |
| You can align images on both sides of the page at the same time, causing text to flow between the two images.
| |
|
| |
| htmlImage logo1( "/images/logo.gif" ) ;
| |
| logo1.Align( align_left ) ;
| |
|
| |
| htmlImage logo2( "/images/logo.gif" ) ;
| |
| logo2.Align( align_right ) ;
| |
|
| |
| page << logo1
| |
| << logo2
| |
| << "This text wraps between the two images." ;
| |
|
| |
| |
|
| |
|
| |
