1
with ui.column().classes('w-full items-center'):
    add_head_html()
    section_heading('短视频基因文件在线提取工具', '*SVDDB* 短视频')
    ui.label('Step 1: 上传视频文件').classes('text-3xl m-3')
    upload = ui.upload(label='选择一个视频文件', auto_upload=True,
                       on_upload=handle_upload)
    results = ui.row().classes('w-full justify-center mt-6')            

    with ui.row().classes('w-full justify-center mt-6'):
        ui.label('基因提取中')
        ui.spinner('dots', size='xl')

图片.png

怎么解决错位的问题?加一个 items-center 就好

with ui.column().classes('w-full items-center'):
    add_head_html()
    section_heading('短视频基因文件在线提取工具', '*SVDDB* 短视频')
    ui.label('Step 1: 上传视频文件').classes('text-3xl m-3')
    upload = ui.upload(label='选择一个视频文件', auto_upload=True,
                       on_upload=handle_upload)
    results = ui.row().classes('w-full justify-center mt-6')            

    with ui.row().classes('w-full justify-center mt-6 items-center'):
        ui.label('基因提取中')
        ui.spinner('dots', size='xl')

图片.png


nicegui 水平居中对齐元素用哪个?用 justify-center

具体用法参考:https://tailwindcss.com/

因为 nicegui 的 css 框架用的是 tailwindcss


universe_king
3.4k 声望677 粉丝