Text and Image on GUILayout.Button? (C#)

[Ereptor]

Hello everyone!

I have a fairly simple GUILayout menu which displays 30 icons which users can select and name.

Here is the code for this menu, very simple:

if (menuActive) {
			
			//This will be the size of the menu.
			Rect menuBackground = new Rect (
				(Screen.width - menuWidth) * 0.5f,
				(Screen.height - menuHeight) * 0.5f,
				menuWidth,
				menuHeight);
			
			//Draw the menu background.
			GUI.DrawTexture (menuBackground, menuBackgroundImage);
			
			//Start of Main Menu.
			GUILayout.BeginArea (menuBackground);
			
			GUILayout.BeginVertical ();
			GUILayout.FlexibleSpace ();
			
			GUILayout.Space (bufferSpace);
			
			//This section creates avatar icons in the menu. These icons are not the actual avatars.
			for (int i = 0; i < 3; i++) {
				GUILayout.BeginHorizontal ();
				GUILayout.FlexibleSpace ();
				int thisRowCount = (i * 10);
				for (int j = 0; j < 10; j++){
					int k = Mathf.Abs ((i + 9) * (j * 7));
					while(k >= 10)
						k /= 10;
					int thisButtonCount = thisRowCount + j;
					GUI.contentColor = avatarColors[k];
					if(GUILayout.Button (avatarImage, faceplateStyle, GUILayout.Width (avatarWidth), GUILayout.Height(avatarHeight))){
							avatarMenuActive = !avatarMenuActive;
							menuActive = !menuActive;
							activeAvatar = thisButtonCount;
							activeAvatarColor = k;
						}
					GUI.contentColor = preColor;
				}
				GUILayout.FlexibleSpace ();
				GUILayout.EndHorizontal ();
				GUILayout.Space (bufferSpace);
			}
			
			GUILayout.FlexibleSpace ();
			GUILayout.EndVertical ();
			
			GUILayout.EndArea ();
		}

I have a separate menu that opens where users can name each avatar individually, but I have absolutely no idea how to display those names over-top of the images. Ideally, the screen would look as such:

How could I accomplish this? Can I overlay a GUILayout.Label on the bottom 1/4th of each button?

[mikejichaow]

Instead of a button, u can use a textfield to display both the avatar and text. The textfield has the size of the avatar image and use the image as background. Then the text alignment setting should be centerbottom. That should combine them good.
The other way is u can sure put a additional textfield under each avatar button. And use overflow and padding setting to push it up to overlap the button.