Text Align Label top-bottom-middle

I’m trying to align the text :

This is my css code :

.label-title{
	 color:white;
	 text-shadow: 0 0 0.2em #bcd3de, 0 0 0.2em #bcd3de,
		0 0 0.2em #bcd3de;
	 font-size: 28px;
	 text-decoration:underline;
	 font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	 background:#0B3758;
	 text-align:center;
	 vertical-align:text-middle;
	 border:2px solid white;
}

But the text is ever on top…

Any idea?

Xavier
11436.png

The problem might be that the most inner divs height is exactly as big as the text, and there is a wrapper div which is modifying the text. That way the vertical align works but it’s centering the wrong div.

However, I suggest that you don’t center anything with CSS text-align and vertical-align. It’s safer to do it on the Java side with layout.setComponentAlignment(label, Alignment.MIDDLE_CENTER);

public class TopLayout extends HorizontalLayout{
	Embedded logo=new Embedded(null,new ThemeResource("../img/logo.png"));
	Label label=new Label("MY-LABEL" );
	public void attach(){
		logo.setStyleName("image-logo");
		label.setStyleName("label-title");

		label.setWidth("100%");
		label.setHeight("100%");

		addComponent(label);
		addComponent(logo);

		setWidth("100%");
		setExpandRatio(label,1.f);
		setComponentAlignment(label,Alignment.MIDDLE_CENTER);
	}
}

No works!!

The align label not change!

By doing

label.setWidth("100%");
label.setHeight("100%");

you make the label as big as the layout so that even if you center it, it won’t move. You have to set the label to as small as possible and make sure that the layout has enough space in it so it can be replaced.

remove the two rows mentioned above and add this:

label.setSizeUndefined();
setHeight("200px");

I know this is 6 years old, but I’m facing these kind of problems here and there.

I’m using Vaadin 7.7.7 and, in my case, this is my code:

VerticalLayout vl = new VerticalLayout();    
vl.setSizeFull();
Label la = new Label("Whatever");            
vl.addComponent(la);
Tab tb = myTabSheet.addTab(vl,"Test");
tb.setClosable(true);
vl.setMargin(true);
vl.setSpacing(true);
vl.setSizeFull();
vl.setComponentAlignment(la, Alignment.MIDDLE_CENTER);

Well, I had to explicitly put a

la.setSizeUndefined();

below line 3 (that is, after adding the Label) in order to get it centrally aligned, as it was taking 100% width anyway and that made it get aligned to the left (checked in Chrome inspector).