View Full Version : Best practices for centering an image

23 Mar 2010, 7:28 AM
This isn't really an ExtJS question, although it pertains to me attempting to center an image in a TabPanel tab.

I want to have a tab with a single image in it that is centered within the tab, and recenters if the browser is resized.

I currently just use this CSS:

.centeredImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
}And add the image to the tab like this:

var tabs = new Ext.TabPanel({
activeTab: 0,
plain: true,
minTabWidth: 115,
tabWidth: 140,
items: [
title: 'TITLE',
html: '<img class="centeredImage" src="images/logo.png">'
autoScroll: true
plugins: new Ext.ux.TabCloseMenu()
});This method, while not perfect, seemed reasonably benign and is supposedly cross-browser friendly. However, the image is centered at the upper left corner of the tab in IE8, but works fine in FF. Is there a better way?


23 Mar 2010, 10:48 AM
OK, the initial answer came via Stackoverflow (http://stackoverflow.com/questions/2502206/need-to-center-image-in-web-page-via-css): use position: absolute instead of fixed. Interestingly, someone posted a link to a programmatic solution that is a plugin for jQuery (http://andreaslagerkvist.com/jquery/center/).

The nice thing about that is it accounts for the image's size, so you don't have to hard code the offsets.

Does the jQuery plugin look translatable to ExtJS? I can't tell if the plugin uses jQuery internals or is just a wrapper around JS.