pywebio.output.put_table表格居中

你可以使用CSS样式来让表格居中。具体操作如下：

1. 在 `put_table()` 函数中，给表格添加一个 `id` 属性，如 `id="my_table"`。

2. 在代码中导入 `put_html()` 函数，使用该函数在表格上方添加一个 `<style>` 标签，来设置表格的样式。

3. 在 `<style>` 标签中添加样式代码，如下所示：

   #my_table {
     margin: 0 auto;
   }

这个样式可以使表格在水平方向上居中。

完整代码示例如下：

from pywebio.output import put_table, put_html

data = [['Name', 'Age', 'Gender'],
        ['Bob', '22', 'Male'],
        ['Alice', '25', 'Female']]

put_html('<style>#my_table {margin: 0 auto;}</style>')  # 添加样式
put_table(data, id='my_table')  # 给表格添加 id 属性

执行上述代码，你将看到表格已经居中显示了。

相关问题

pywebio.output.put_image(img, width='50%')如何把图片居中显示

要让 `put_image()` 函数中的图片居中显示，可以在调用函数时，将 `width` 参数设置为图片宽度的具体值，而不是百分比。

具体来说，你可以通过 Python 中的 `Pillow` 库，来获取图片的宽度，然后将其作为参数传递给 `put_image()` 函数。然后，你可以使用 CSS 样式来将图片居中显示。

以下是一个基本的例子：

from PIL import Image
from pywebio.output import put_image, put_html
from pywebio import start_server

def main():
    # 读取图片并获取宽度
    img = Image.open('example.jpg')
    width = f'{img.width}px'

    # 将图片居中显示
    put_html(f'<div style="display: flex; justify-content: center;"><img src="example.jpg" style="width: {width};"></div>')

if __name__ == '__main__':
    start_server(main)

在这个例子中，我们首先使用 `Pillow` 库读取图片，并获取其宽度。然后，我们将宽度作为参数传递给 `put_image()` 函数，并将其设置为具体值，而不是百分比。最后，我们使用 CSS 样式将图片居中显示。

需要注意的是，这里使用的是 `put_html()` 函数来输出 HTML 代码，以便我们可以自由地控制样式。如果你希望使用 `put_image()` 函数，也可以在调用函数时，将 `width` 参数设置为具体值。然后，你可以添加样式表，来将图片居中显示。

pywebio.output.put_image(graph.main(zff,times), height='70%').style('text-align:center;vertical-align: top;')将图片水平居中但垂直方向不居中请修改这个代码

如果要让图片在垂直方向上居中，可以将 `vertical-align: top;` 修改为 `vertical-align: middle;`。修改后的代码如下所示：

pywebio.output.put_image(graph.main(zff, times), height='70%').style('text-align:center;vertical-align: middle;')

这样就可以让图片在水平和垂直方向上都居中了。当然，这还取决于容器元素的高度是否足够容纳图片，如果容器元素的高度不够，图片仍然会在垂直方向上偏上或偏下。