Hi I am having quite a lot of trouble centering my login page, all the functionality works perfectly but I am struggling with the layout. Any help would be massively appreciated!
What I would like:
Completely black background
Container positioned in the center of page - with a white border
Logo, username, password and login button all in center of the container
My code is as follows, I understand it may be very messy and alot of styles may overwrite each other but I am very new to this!
layout = html.Div(
style={
"background": 'black',
"height": "100vh",
"width": "100vw"},
children=[
html.Div(
children=[
dcc.Location(id='url_login', refresh=True),
html.Div(
children=[
html.Div(layouts.input_logo(app),
style={'display': 'block',
'text-align': 'center',
'margin-left': 'auto',
'margin-right': 'auto'}),
html.Br(),
dcc.Input(
placeholder='Enter your username',
type='text',
id='uname-box',
style={'display': 'table-cell',
'vertical-align': 'middle',
'margin': 'auto'}
),html.Br(),
dcc.Input(
placeholder='Enter your password',
type='password',
id='pwd-box',
style={'display': 'table-cell',
'vertical-align': 'middle',
'margin': 'auto',
}
),html.Br(),
html.Button(
children='Login',
n_clicks=0,
type='submit',
id='login-button',
style={'display': 'table-cell',
'vertical-align': 'middle',
'margin': 'auto',
}
),
html.Div(children='', id='output-state')
]
),
],
className='center',
style={
'vertical-align': 'middle',
"height": "40vh"}
)
]
)
The class name “center” is in my assests/styles.css
.center {
text-align: center;
padding-top: 30vh;
margin: auto;
width: 50%;
border: 4px solid #FFFFFF;
vertical-align: middle;
/*padding: 10px;*/
}
And my logo comes from:
def input_logo(app):
logo = html.Img(src=app.get_asset_url("logo_white.png"),
style={"padding-left": '2vw', "float": "center", "height": 60})
link = html.A(logo, href="link")
return dbc.Row([dbc.Col(link, md=4)])
This results in the following;
