Centering a texture in a GUI.Button

Hello, I’m trying to make a button with width and height of 585x400, in this button I want to center a 336x100 image for normal and one for hover. I’m doing it like this.

            GUIStyle buttonContentStyle  = new GUIStyle(guiSkin.GetStyle("myButton"));
			if(buttonImage != null)
                buttonContentStyle.normal.background = buttonImage[0];
                buttonContentStyle.hover.background = buttonImage[1];
                buttonContentStyle.fixedHeight = buttonImage[0].height;
                buttonContentStyle.fixedWidth = buttonImage[0].width;
                buttonContentStyle.alignment = TextAnchor.MiddleCenter;
			if(GUI.Button(new Rect(0,0,585,400), "", buttonContentStyle))

This just makes the image the correct size but aligns it to the top left, not to the center of the button. Any help regarding this issue would be most welcome.


According to the documentation the alignment property deals with text alignment.

I believe you might want to use the padding, margin, or contentOffset properties to align your image. You already know the width of the GUI element and the width of the image in your code.

GUIStyle also has an imagePosition property, but I've never figured that one out.

I would also recommend using a GUISkin in stead. It is very easy to assign a texture for each of the 8 button states using the Inspector (on and off: normal, hover, active, focused).

You can also change these images using code (like you already are). Here is the documentation for the normal property of a GUIStyle. As you can see, its type is GUIStyleState, which has two properties: a background image and text color. The onHover property would represent the background image and text color of a Toggle button that was turned on and has the mouse hovering over it.

You can also manipulate the border property of a GUIStyle to control how images will react if they are smaller than the GUI control they're used on.

For example: If you set the border to be (1, 1, 1, 1) the outermost pixel of the background image will remain unscaled at the perimeter of the control. The rest of the image (the inside) will stretch to fill the control.

I had a hard time finding this, but this thread from the forums covers how to use the border property to scale images on GUI controls.

It also shows you how to create your own custom GUISkin images.

Hope some of this helps.

Give a look to the GUISkin component (Menu->Assets->Create->GUISkin),
there are many parameters to make the button texture proper.
From those parameters you have full control on how the gui button texture should behave/repeat/align.

I think what you want to do is not make the image part of the style, because the style is always used to fill the entire controls rectangle. Instead, you would want to set the image as the GUIContent and use the style content offsets to center the image.

Conversely, if you really want to use the style, you could just make your art the full size of the control and put a transparent border around it in the art itself.

Setting OverFlow to negative seems to shrink the texture down and let the text hang over.

Squidbots’s transparent border sounds like the more official way. “Everyone knows” that Button/GUI textures always fill the entire clickable area, even if they are a black border and transparent insides. That’s probably why you haven’t found a similar Q.