object Text - in css vertical-align:middle; does not work

[Former Member]

Hi All,

in a cell with an text-object the css-format

text-align:center;  works

but

vertical-align:middle; does not work

Is there any way to bring the text vertical in the middle?

thx for hints

br harry

[Former Member]

Hello Harald,

As Nicolas said u can apply that css script befor or aftr your css class formatting. It will work as you wanted.

[Former Member]

Hi Pantel,

thy for answer.

Did you have a sample css textobject in a maincell?

The sample from tammy works but the textbox is smaller as the main-cell.

br harry

[Former Member]

I have applied following code :

color: #FFFFFF;

text-align: center;

font-size: 20px;

background-color: #797B79;

display: table-cell;

vertical-align: middle;

That  gave me below effect.

[Former Member]

Hi Pantel,

thx for the code.

The code is good but the text-object is not resized to the main cell.

top left .... = 0 width and height is auto i think in the css code must the height from the table-cell 100% then grow up to the main-cell but it is not working see the screenshot

The dotterd line in the screenhot show the real height

br harry

[Former Member]

Hello Harald,

You can directly increase size of text component as similar to main text. You dont need any css code for that.

You can simply simply drag it with arrow key.

If I am wrong, Please share the image how u want your text component to be (with help of paint or something)

Thanks,

Manali Patel

[Former Member]

Hi Pantel,

Step 1:

make a new projekt

Step 2:

insert a grid_layout with one cell

Step 3:

insert a textbox

in the property i write the text

now the text is left top corner

now i want make the font bigger, the text center vertical and center horizontal

i write in the css-property     is this wrong? in the grid_layout-cell is no property

color: #FFFFFF;

text-align: center;

font-size: 20px;

background-color: #797B79;

display: table-cell;

vertical-align: middle;

when display: table-cell; ist enabled then the Textbox is very small

when display: table-cell; ist disabled then the Textbox is the same size as the cell but the text is not center both directions

i dont know what is wrong.

It is simple two elements
grid_layout and a text box and the text has be center in both directions

width and height is auto full screen all elements

br harry

[Former Member]

keep your text component and grid cell component size same. and den apply this css code it will work.

please see below images...

1) text component

2) grid data cell

[Former Member]

Hi Pantel,

yes you are right when width and height ist fixed , but this work only when width and height from the textbox is not "auto"

the cell are auto and the textbox  must grow up automatically  the same size as the cell.

thx

br harry

[Former Member]

Try creating CSS class and apply the same for both the components in the properties of Text and Cell component.

Manali...

[Former Member]

Hi Manali,

thx for help but is does not work.

I do the code in my user.css but it is not working.

.mytext_v_center

font-family: arial, sans-serif;

font-size: 20px;

color: black;

line-height: 45px;

text-align: left;

display: table-cell;

vertical-align: middle;

other css sections working in my user.css

you know more of the user.css?

I dont know how is the checkfield structure defined i want to make the font of them bigger

For a normal checkfield is the font very small

thank you for hints

br harry

[murali_balreddy]

Harry,

Text of Certain components cannot be formatted using CSS.

Thanks.