vertical-lr + align.center in vaadin grid doesn't work.

I create a custom header in vaadin grid and combine with ColumnTextAlign.CENTER

 grid.addColumn(map -> map.get(key)).setEditorComponent(textField)
    .setHeader(new Html(
        "<div style='"+
          "writing-mode: vertical-lr;" +
          "text-orientation: upright;" +
          "text-align: center;'>" + key + 
        "</div>"))
    .setTextAlign(ColumnTextAlign.CENTER);

i get this:

Question:
How to make custom header and row content in a center mode?

Your div does not have width, should be 100% perhaps

That probably won’t help with the vertical-lr, though

text-align: center does’t work horizontally when writing-mode is vertical. Then it works vertically instead. Thus no horizontal center alignment

Maybe display:flex and width:100% would do it?

I tried Rolfs solution, didn’t work for me, but a bit hackish way that worked was

.my-column-div {
  margin-left: 49%
}

Thought I’d be able to achieve this (better way) with margin-left: auto; margin-right: auto; but that doesn’t seem to work.

Actually, if you can add a wrapper div around your original:

grid.addColumn(map -> map.get(key)).setEditorComponent(textField)
                .setHeader(new Html(
                        "<div style='display:flex;'>" +
                                "<div style='"+
                                "writing-mode: vertical-lr;" +
                                "text-orientation: upright;" +
                                "margin-left: auto;" +
                                "margin-right: auto;" +
                                "'>" + key +
                                "</div>" +
                                "</div>"))
                .setTextAlign(ColumnTextAlign.CENTER);

added the style='display:flex to parent div and margin-left: auto; margin-right: auto; to the child div element, which seems to work nicely.

Man many thanks to you all :pleading_face: as a new bee, I never ever come to this conclusion :neutral_face: . especially @incredible-wolf , many thanks man