How to vertically locate elements with different height at the middle of a container?

UrielG
20 Posts
UrielG posted this 03 December 2015

I am working on a WordPress Theme for a client using Themler Pro. The header includes a logo image (using a Logo Control) and a menu bar. I want for both of them to position in the same line: logo aligned at the left and menu bar at right (like if they were justified inline text elements).

Using float attributes for achieving that works ok for horizontal alignment. But because the height of the image logo is greater than height of menu bar, this one shows vertically aligned to the top. How can I align them vertically at the middle?

This is how the header shows:

enter image description here

This is how it should:

enter image description here

I will appreciate any helpful suggestions :-)

I am working on a WordPress Theme for a client using Themler Pro. The header includes a logo image (using a Logo Control) and a menu bar. I want for both of them to position in the same line: logo aligned at the left and menu bar at right (like if they were justified inline text elements). Using float attributes for achieving that works ok for horizontal alignment. But because the height of the image logo is greater than height of menu bar, this one shows vertically aligned to the top. How can I align them vertically at the middle? This is how the header shows: ![enter image description here][1] This is how it should: ![enter image description here][2] I will appreciate any helpful suggestions :-) [1]: http://i67.tinypic.com/x5uzh3.png [2]: http://i67.tinypic.com/4jtcsm.png

Last edited 03 December 2015 by UrielG

vertical-alignment vertical-middle
Vote to pay developers attention to this features or issue.
6 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 04 December 2015

Hi,

have you tried to set the vertical-align to middle under the Arrange tab in the Header settings?
If that does not help, please attach your theme so we could have a look.

Sincerely,
Hella

Hi, have you tried to set the vertical-align to middle under the Arrange tab in the Header settings? If that does not help, please attach your theme so we could have a look. Sincerely, Hella
UrielG
20 Posts
Is Solution
UrielG posted this 08 December 2015

Dear Hella,

I already tried with the vertical-align to middle option. In fact, I need the same behavior to work with the slider just below the header as you could see for the first slide in the desktop view.

Dear Hella, I already tried with the vertical-align to middle option. In fact, I need the same behavior to work with the slider just below the header as you could see for the first slide in the desktop view.
Redmundial-Theme-1b.zip
UrielG
20 Posts
UrielG posted this 08 December 2015

I think the vertical align option works only when the element's container is set to table-cell. That was one of the options I've tried but still can't achieve the texts to be aligned at the middle

I think the vertical align option works only when the element's container is set to table-cell. That was one of the options I've tried but still can't achieve the texts to be aligned at the middle
UrielG
20 Posts
UrielG posted this 10 December 2015

I request your attention to this issue thread please.

I request your attention to this issue thread please.
Stagger Lee
1818 Posts
Stagger Lee posted this 10 December 2015

Put those two things inside new row and 2 columns.

Put those two things inside new row and 2 columns.
Support Team
Support Team posted this 10 December 2015

Hi,

Sorry for the delay. Indeed, put logo and menu into two columns of the row. Then set the Row Height to Full Height (FlexBox) and set the Vertical Align to middle.

Sincerely,
Hella

Hi, Sorry for the delay. Indeed, put logo and menu into two columns of the row. Then set the Row Height to Full Height (FlexBox) and set the Vertical Align to middle. Sincerely, Hella
You must log in or register to leave comments