set up vertical alignment for mutiple component in same hbox

asked 2011-05-09 11:21:40 +0800

paula gravatar image paula
74 2

Hi, I have a hbox component which includes an image and a link following the image. And I want both these 2 components vertical aligned at center of the hbox. I tried to set up "valign" in <hbox> or <image> or <toolbarbutton> but none of them works.

Here is my code:

<image id="avatar" src="..." />
<toolbarbutton label="Edit" onClick="..." />

Can anyone help? How can I set up vertical alignment for all components in same hbox?

Thank you!

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2011-05-09 11:44:14 +0800

LuisVelez gravatar image LuisVelez

Hi Paula

is this what you want?

		<hbox align="center" width="200px" height="400px">
		<div align="center">
			<image id="avatar" src="..." />
			<toolbarbutton label="Edit" onClick="..." />

link publish delete flag offensive edit

answered 2011-05-09 11:53:52 +0800

twiegand gravatar image twiegand
1807 3


You didn't mention what version of ZK you are running but assuming you are at ZK 5 or above, I might suggest that you simplify your code and go with <vlayout> instead of <hbox>. Here is an example:

		<vlayout style="text-align: center;">
			<image src="http://t2.gstatic.com/images?q=tbn:ANd9GcR8oGCPZg8XMpg2C8NDV1XqKOb2CDT9qOU9x5zx_wDHIwfeN86y"/>
			<toolbarbutton label="Edit" onClick='alert("You clicked Edit");' />

You can set the width of your <vlayout> manually if you want. Otherwise, it will fill to the size of the parent container (in this case the size of the window).

I typically use <vbox> / <hbox> very sparingly as it is very "heavy" in terms of what gets rendered at the client. For example, <hbox> / <vbox> gets rendered as an HTML table whereas <hlayout> / <vlayout> components simply get rendered as <div> tags.

Hope that is of value...



link publish delete flag offensive edit

answered 2011-05-09 14:02:49 +0800

paula gravatar image paula
74 2

updated 2011-05-09 14:03:35 +0800

thanks to both help above.
The <hlayout> aligns the components vertically just fine!

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2011-05-09 11:21:40 +0800

Seen: 860 times

Last updated: May 09 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More