The way to align text vertically

Dash Python
1

Hi guys,
In my practice, I changed the height of dcc.Tabs, but the label text wasn’t automatically vertically centerd. I tried to write like :
dcc.Tabs(
id = ‘tabs’,
children = [
dcc.Tab(
label=‘Tab-1’,
children = [
dcc.Graph(
id = ‘temperature’
)
],
style = dict(verticalAlign = ‘middle’),
selected_style = dict(backgroundColor = ‘lightyellow’)
),
dcc.Tab(
label = ‘Tab-2’,
children = [
dcc.Graph(
id = ‘wind’
)
],
selected_style = dict(backgroundColor = ‘lightyellow’)
),
dcc.Tab(
label = ‘Tab-3’,
children = [
dcc.Graph(
id = ‘all’
)
],
selected_style = dict(backgroundColor = ‘lightyellow’)
)
],
style = dict(width = ‘800px’,
height = ‘50px’
)
)
I changed style to ‘verticalAlign = ‘middle’’, but it doesn’t work.
Please help me~

tab
tab856×83 1.08 KB

2

Hi @fxm531

You can add space in the bottom using ‘padding-bottom’:2 or the number you need.

4

Thanks! @Eduardo
But where should I add “paddingBottom”? The style of tab or tabs?
I tried both，but neither was successfull…the text of label was still not vertical center.

5

You can add padding-bottom in both styles, also try setting the height value and see if it change the vertical position.

6

Nice! It worked! @Eduardo
Thanks very much!

1 Like
7

Hello. I had the same issue, I solved it with the following style:

tab_style = {
    "display": "flex",
    "justify-content": "center",
    "align-items": "center",
}
3 Likes