Centre image within panel

[ScottWalkinshaw]

Hi There,

Would someone be able to help me with centering an image (both horizontally and vertically) within a panel? I've messed around with layout and layout config but can't find the correct way to do it.

The center panel within a layout panel holds the image (see screenshot) but I want the image centered. Any ideas please?

Thanks
Scott

Center Panel:

  Ext.define('indigo.f_item_image', {
    extend         : 'Ext.panel.Panel',
    autoScroll    : true,
    id            : 'f_item_image',
    alias          : 'widget.f_item_image',
    frame       : true,
    items       : [ {
      xtype      : 'hiddenfield',
      id         : 'sl_library_id',
      name       : 'sl_library_id',
      readOnly   : true,
      value      : rec.get('library_id')
    }, {
      xtype     : 'box',
      id        : 'sl_image',
      name      : 'sl_image',
      readOnly  : true,
      html      : v_url
    }],
    dockedItems    : [{
      xtype       : 'toolbar',
      id          : 'sl_bottom',
      name        : 'sl_bottom',
      dock        : 'bottom',
      layout      : {
        pack: 'center'
      },
      items: [ {
        xtype   : 'button',
        id      : 'sl_delete',
        name    : 'sl_delete',
        width   : 80,
        height  : 30,
        frame   : true,
        border  : true,
        type    : 'submit',
        text    : 'Delete',
        icon    : 'icons/web2_blue/24x24/Trash.png',
        cls     : 'x-btn-text-icon',
        handler : function() {
                    f_submit('-', 'D')
                  }
      }]
    }]
  });

Layout Panel:

    var w_show_item = new Ext.Window ({
                   id          : 'w_show_item',
                   name        : 'w_show_item',
                   title       : rec.get('title'),
                   width       : v_width,
                   height      : v_height,
                  layout    : 'border',
                  resizable : false,
                  draggable : true,
                  modal     : true,
                  items:[{
                    region       : 'west',
                    frame        : true,
                    border       : false,
                    width        : 175,
                    xtype        : 'f_item_detail'
                   }, {
                    region       : 'center',
                    frame        : true,
                    border       : false,
                    width        : 150,
                    xtype        : 'f_item_image'
                   }]
                 });

[tvanzoelen]

I don't understand this part

{
      xtype     : 'box',
      id        : 'sl_image',
      name      : 'sl_image',
      readOnly  : true,
      html      : v_url
    }

isn't 'box' a layout and you want to give that panel a box layout?

{      
      id           : 'sl_image',
      name      : 'sl_image',
      readOnly  : true,
      html        : v_url,
      layout: {
       type: 'box',
       pack: 'center'
     }
}

Maybe ...?

[arcan9ne]

I would try adding the style property:

Ext.define('indigo.f_item_image', {
extend         : 'Ext.panel.Panel',
style: 'text-align: center;'
...

[ScottWalkinshaw]

Thanks for the suggestion but if I don't specify the xtype of the item the layout window doesn't render correctly. All I'm trying to do with saying xtype :'box' is to change the item component type from the panel default xtype which is texfield I believe. I can specify xtype: 'component' but I get the same results.

I don't mind whether just the image is centered or all items within both the west panel and the centre panel are centered so I've tried specifying layout: {pack = 'center'} at both the image item level and the layout panel level but neither have any effect.

Thanks

[ScottWalkinshaw]

Thanks - that centered the image horizontally! Still struggling to center it vertically though, I tried style: 'text-align:center;vertical-align:middle;' but that has no effect. Any thoughts?

Cheers

[tvanzoelen]

Interesting

I don't understand that box thing. Is the image in v_url ?

then maybe wrap a div around it. '<div>' ++ '</div>' and center that div with a style. Or align it center then you have your horizontal center.

xtype     : 'box',
      id        : 'sl_image',
      name      : 'sl_image',
      readOnly  : true,
      html      : "<div align="center">" + v_url + "'</div>"'

it should be possible to do whatever your want with html

[arcan9ne]

To align vertically, you should try the following:

style: 'display: table-cell; vertical-align: middle; text-align: center'

[ScottWalkinshaw]

Hi Guys,

Thanks for all the suggestions but still not there yet.

tvanzoelen - if if I try to put it in a div and center that it still only centers the image horizontally (I've changed the xtype from box to component and used a literal for the html instead of my variable to make it easier to understand):

  Ext.define('indigo.f_item_image', {
    extend     : 'Ext.panel.Panel',
    id         : 'f_item_image',
    alias      : 'widget.f_item_image',
    frame      : true,
    autoScroll : true,
    items      : [ {
      xtype      : 'hiddenfield',
      id         : 'sl_library_id',
      name       : 'sl_library_id',
      readOnly   : true,
      value      : rec.get('library_id')
    }, {
     xtype     : 'component',
      id       : 'sl_image',
      name     : 'sl_image',
      readOnly : true,
      html     : '<div align="center"> <img src="images/images.jpg"></div>'
    }],

arcan9ne - I've also tried your suggestion, I've tried adding the style config at the panel level and at the item level, but again this only centers the image horizontally...

  Ext.define('indigo.f_item_image', {
    extend     : 'Ext.panel.Panel',
    id         : 'f_item_image',
    alias      : 'widget.f_item_image',
    frame      : true,
    autoScroll : true,
    style      : 'display: table-cell; vertical-align: middle; text-align: center',
    items      : [ {
      xtype      : 'hiddenfield',
      id         : 'sl_library_id',
      name       : 'sl_library_id',
      readOnly   : true,
      value      : rec.get('library_id')
    }, {
     xtype     : 'component',
      id       : 'sl_image',
      name     : 'sl_image',
      readOnly : true,
      html     : '<img src="images/images.jpg">'
    }],

HTML isn't my forte (which is why I thought I'd try to use a framework) but there must be a way to do it...

Thanks

[tvanzoelen]

You must combine our answers and put arcan9nes style on the div.

[raz0r1]

If your image-panel is maximized (so it fills the full right side of the window), you maybe go better by adding "margin:auto" to the image.