All images included in an XHTML Web page document are horizontally aligned with the top and bottom edges of the browser window in which they are viewed by default. If you want to change this behavior and display your images using an alternate orientation, all you have to do is apply a few Cascading Style Sheet rules to the image you want to rotate. Once you understand how to configure these rules to work within the limitations of different browsers, rotating an image in an XHTML document becomes a quick task.
Open in an editing program the XHTML Web page containing the image you want to rotate. You can use either a visual design tool (e.g., Adobe Dreamweaver or Microsoft FrontPage) or a text editor (e.g., Notepad, Wordpad).
Single-click the image you want to rotate and then switch your design program into its "Code," "HTML" or "Source" mode to view the XHTML code that controls the structure of the page. If you use a text editing program, locate the line that contains your image code instead. In either case, the code for your image should resemble the following:
<img src="file_name.jpg" />
Insert a space after the second quotation mark character and then insert a blank style parameter, so that your image tag resembles the following:
<img src="file_name.jpg" style="" />
Insert five specialized CSS style rules in between the two quotation mark characters associated with the style parameter, so that your image tag resembles the following:
<img src="file_name.jpg" style="display:block; rotation:90deg; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);" />
The "90deg" and "rotation=1" values rotate the image clockwise by 90 degrees. If you need to rotate the image 180 degrees, enter "180deg" and "rotation=2" for the corresponding parameters. To rotate an image 270 degrees, enter "270deg" and "rotation=3" for the corresponding parameters.
Click "File" in the top menu bar and select "Save" to confirm your changes.
How to Rotate HTML Text 90 Degrees
The standard for cascading style sheets, CSS3, introduced the transform property that makes it easy to rotate text to any degree angle,...
How to Set a Background Image in XHTML
Extensible HyperText Markup Language (XHTML) is an XML-based variant of the HyperText Markup Language used to develop Web pages. Unlike HTML, the...
How to Align Buttons Vertically
HTML "div" tags let you align form elements such as buttons both vertically and horizontally. The HTML div tag formats data, so...