Home > Web Front-end > JS Tutorial > body text

Examples of horizontal and vertical centering of commonly used images in containers_javascript techniques

WBOY
Release: 2016-05-16 19:12:38
Original
793 people have browsed it

This is an example of horizontal and vertical centering of an image of unknown size in a container of known size. Original title: "Centering an image of unknown size in an outer container of known size".
This example of horizontal and vertical centering can work normally in IE5.

IE uses inline-blocks, non-IE uses table-cell and vertical-align.

CSS code:

The following is a reference fragment:
/* for non-IE browsers */
div.holder {width:750px; height:300px; background:# f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}
#container {text -align:center; width:100%; display:inline-block; vertical-align:middle;}




xhtml code:

Examples of horizontal and vertical centering of commonly used images in containers_javascript techniques






The author’s example is Single, I extended it to 6 pictures on a page, which can be used in photo albums and product displays. View the demo
form:http://www.cssplay.co.uk/ menu/centered.html
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template