Kompx.com or Compmiscellanea.com

CSS centering image

Windows : Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 5.0+ [ 1 ], Safari 3.1+, SeaMonkey 1.0+ [ 2 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 3 ], NetSurf 2.6+, Hv3.

CSS horizontal centering of an image. Example:

Image

HTML / XHTML. Code:

<div class="example">

<img src="image.jpg" alt="Image" />

</div>

CSS. Code:

.example {position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;}

.example img {display: block; margin: 0 auto;}

CSS properties of a container (here it is example) may vary, image centering is achieved by styles applied to the image itself: .example img {display: block; margin: 0 auto;}.


[ 1 ]

As well as Opera 4.0+, if shorthand CSS is not used in styles. That is, if it is .example img {display: block; margin-left: auto; margin-right: auto;}.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 3 ]

As well as Netscape 6.01+, Mozilla 0.6+.


Aliosque subditos et thema


Float bottom


There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.

Windows console applications. Multimedia


MPlayer : FFmpeg Media players appeared long ago, but their heyday began with the mass spread of personal computers powerful enough to play video files. This coincided with the mass spread of operating systems and other software with graphical user interface. However, a program with a graphical user interface is dualistic in its nature: there is a code responsible for graphical user interface, for the appearance and there is a code - for performing the task the given application has been created for in the first place. Both code complexes consume system resources, their response time to user actions makes up certain amount of waiting time. And in cases or concepts when appearance is taken as less important - less important to the point of sparing or almost sparing to employ it - console applications, among others, appear. Moreover, the segmentation of the GUI and of the engine makes it easier to change the graphical user interface or perform complex automated operations. The scheme is implemented for media players for Windows as well. MPlayer, for instance, in its usual form is a console application, starting up quickly, having fast response to user actions, consuming system resources almost entirely for its immediate task. And on this basis if desired, one or another graphical interface may be added for creating, all in all, a new application. MPlayer - / home page / Console media player for Windows. Basis for SMPlayer and UMPlayer. There are versions for Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, some other *nix system, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Supported video, audio formats, static images, subtitles, etc. ( List and More extensive list of video and audio codecs ). MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Balzaminov's Marriage" FFmpeg - / home page / Pack of utilities and libraries for work with video and audio files. Created in and for Linux, but there is a Windows variant. Source code may be compiled for some other operating systems. Supported file formats and codecs: ( List ). Also, VLC media player can be run in text mode, ncurses using.