CSS Text position

[DGrandes]

Hi,

Is there any way to align text menu by css class?
I've created a menu css class and I want to align them horizontally with fixed separation.

It is possible?

Thanks

[admin]

Post a screenshot of what you want to achieve. For standard controls any CSS changes will affect all controls of the same type.

[DGrandes]

Post a screenshot of what you want to achieve. For standard controls any CSS changes will affect all controls of the same type.

Hi,

I have this:

   

And I want to get this by css:

   

[admin]

Can you provide a backup?

[DGrandes]

Can you provide a backup?

  Project-LogicMachine-2019.09.05-11.37 (1).tar.gz (Size: 31.03 KB / Downloads: 23)

[admin]

Use this custom CSS. Modify width and height as needed. line-height should be the same as height for text to have middle vertical alignment. Element position should be adjusted in the editor.

Code:

.MenuInicio{
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  text-transform: uppercase;  
}

.item-control.ClasePorDefectoVisible{
  color: white !important;
  border-top: #05a3b7 0.2em solid;
  background-color: #424242;
}

[DGrandes]

Use this custom CSS. Modify width and height as needed. line-height should be the same as height for text to have middle vertical alignment. Element position should be adjusted in the editor.

Code:

.MenuInicio{
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  text-transform: uppercase; 
}

.item-control.ClasePorDefectoVisible{
  color: white !important;
  border-top: #05a3b7 0.2em solid;
  background-color: #424242;
}

Thank you!

It works
What is ".item-control" for?

[admin]

You can just put .ClasePorDefectoVisible there. Multiple selectors are sometimes needed to avoid "!important".

[DGrandes]

You can just put .ClasePorDefectoVisible there. Multiple selectors are sometimes needed to avoid "!important".

Ok! thanks

[Domoticatorino]

Hi folks,
I am studying the threads because I want to improve visualisation tricks.

Further to thread above, I cannot understant where it is call "MenuInicio". Because when I test the example you show in visualisation page is complete white.

Thanks.

[admin]

It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

[Domoticatorino]

It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

Yes,
you're right. The problem is the missing object. I forget everytime.
Thanks.

---

It's set in Additional classes. If you are testing the attached backup then make sure that you have at least one object on each plan otherwise it won't be shown because empty plans and plan links to such plans are not rendered at all.

Sorry Admin. Where I should declare Additional classes of Menu.Inicio?

[Daniel]

In the same place where ClasePorDefectoVisible, you can add more than one class to an element

[DGrandes]

Hi,

Is there any way to do the same with an "icon"? text-align center and line-height don´t work with this type of element.

Thanks

[admin]

Why do you need this for icon? Do you have icons with different sizes? If so it would be easier to make icons the same size.

[DGrandes]

Why do you need this for icon? Do you have icons with different sizes? If so it would be easier to make icons the same size.

Because if I do a table with text and icons text aling in the center but icon stays where I put in visualization.
It would be easyer if I could center the image with text.

Thanks