Aligning components vertically

How do i properly align these components so the text is vertically on the center?
unknown.png
unknown.png

Can you please show your code as text. Don’t paste images

What are the types

hmm, you’re kind of doing opposite things there:
assuming that’s a HorizontalLayout,
setAlignItems sets the cross-axis (i.e. vertical) alignment
setJustifyContentMode sets the main axis alignment (i.e. horizontal).
setVerticalComponentAlignment should do the right thing though.

    H4 lbNomeFantasiaCliente = new H4(),
       lbRazaoCliente = new H4();
    Avatar avatarCliente = new Avatar();

layoutInfos1.setAlignItems(Alignment.START);
layoutInfos1.setJustifyContentMode(JustifyContentMode.CENTER);
layoutInfos1.setVerticalComponentAlignment(Alignment.CENTER, lbNomeFantasiaCliente, lbRazaoCliente,
                avatarCliente);```

ah, the H4’s have default margin above, thus the misalignment

Ah i see

I would use a Span instead of H4 anyway

unless it’s really a heading

yeah its a reading

well then I think you can override that default spacing with
addClassName(LumoUtility.Margin.NONE);

image.png

ok, ill try that!

this works quite nicely for me:

HorizontalLayout testlayout = new HorizontalLayout();
testlayout.setDefaultVerticalComponentAlignment(Alignment.CENTER);
H4 h4 = new H4("Bar");
h4.addClassName(LumoUtility.Margin.NONE);
testlayout.add(new Avatar("Foo"), h4);
add(testlayout);

it had no effect…

image.png

lbNomeFantasiaCliente.addClassName(LumoUtility.Margin.NONE);
lbRazaoCliente.addClassName(LumoUtility.Margin.NONE);

layoutInfos1.setAlignItems(Alignment.START);
layoutInfos1.setDefaultVerticalComponentAlignment(Alignment.CENTER);

btw, i am adding the components on declaration, could that be the reason?

HorizontalLayout layoutInfos1 = new HorizontalLayout(avatarCliente, lbRazaoCliente, lbNomeFantasiaCliente);

could you try with a Span?

ok, ill give it a try