Question Re: object Text - in css vertical-align:middle; does not work in Technology Q&A

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

Former Member — Wed, 21 Aug 2013 06:51:37 GMT

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

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

TammyPowlas — Wed, 21 Aug 2013 10:38:33 GMT

I am not a CSS expert, but after Googling and then trying it out on my system, here is what I have working:

background:indigo;

vertical-align: middle;

text-align: center;

#text{ line-height: 30px; vertical-align:middle; }

width: 50px;

height: 34px;

text-align: center;

line-height: 30px;

vertical-align: middle;

#myoutercontainer2 { line-height:4em }

</style>

...

Hey, this is vertically centered. Yay!

</p>

I cannot tell you which part of the CSS makes this work, but it is working on my test system.

Regards,

Tammy

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

Former Member — Wed, 21 Aug 2013 11:21:22 GMT

Hello Harald,

You should try to add this css code to your cell:

display: table-cell;
vertical-align: middle;

The vertical-align property only works on html cells, and that's the aim of adding display: table-cell

Waiting for your feedback,

Best,

Nicolas

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

Former Member — Wed, 21 Aug 2013 11:41:12 GMT

Hello Harald,

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

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

Former Member — Wed, 21 Aug 2013 12:11:27 GMT

Hi Nicolas,

ths for answer

I checked it but the Celle ist not in the middle of the main-cell.

You dotterd the maincell and the table-cell is left and top

you can see the css in the screenshot

Have you more idea? thx br harry

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

Former Member — Wed, 21 Aug 2013 12:20:40 GMT

Hi Tammy,

thanky for the idea.

Yes it works but is the same the main-cell ist not fillend.

I changed the code by height = 100% then filled the main-cell but the text is not vertical in the middle.

thx for hint br harry

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

Former Member — Wed, 21 Aug 2013 12:23:40 GMT

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

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

Former Member — Wed, 21 Aug 2013 13:21:01 GMT

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.

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

Former Member — Wed, 21 Aug 2013 15:02:13 GMT

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

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

Former Member — Thu, 22 Aug 2013 04:44:49 GMT

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

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

Former Member — Thu, 22 Aug 2013 06:59:47 GMT

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

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

Former Member — Thu, 22 Aug 2013 10:13:43 GMT

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

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

Former Member — Thu, 22 Aug 2013 11:27:15 GMT

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

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

Former Member — Fri, 23 Aug 2013 09:36:15 GMT

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

Manali...

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

Former Member — Fri, 23 Aug 2013 10:53:17 GMT

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

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

murali_balreddy — Fri, 23 Aug 2013 12:37:44 GMT

Harry,

Text of Certain components cannot be formatted using CSS.

Thanks.

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

Former Member — Wed, 28 Aug 2013 10:33:04 GMT

Hi Harry,

Try Padding, i think it'll work.

Regards,

Fazith

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

Former Member — Wed, 28 Aug 2013 13:07:59 GMT

Hi Fazith,

Padding: 0px

do not work.

thx for hint

br harry

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

Former Member — Thu, 29 Aug 2013 05:31:22 GMT

Hi Harry,

Did you try giving more than 0px? usually when you give 10 or 15 it usually centre it up, In the Default Template they would have given the Padding to achieve what you have hinted.

Thanks,

Fazith

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

Former Member — Thu, 29 Aug 2013 05:56:28 GMT

Hi Fazith,

yes i take 15px and 50px test more values. The Objekt goes bigger then maincell.

I want to look now in the Default Template

thx harry