Web2Py 居中 Div

Question

我正在对仪表板进行编程，以显示我公司正在进行的项目的属性。这些属性稍后将从 API 中提取，但我目前正在从 JSON 文件中解析它们。

我的目标是这样的：

每组面板水平居中。我试图实现我的目标，但我无法将面板组居中。当我尝试使用 wrapper div 和 text-align: center 将面板居中时，这是我收到的结果：

这是我的 HTML/Python 代码：

{{response.files.append(URL('static','DashboardLayout.css'))}}
{{include 'web2py_ajax.html'}}

<meta http-equiv="refresh" content="60">

<body>
{{projectIndex=0}}
{{while projectIndex < len(JsonInfo):}}
    <div class = "projectName">Makin' Food</div>
    {{environmentIndex = 0}}
    <div class = "panel-wrapper">
    {{while environmentIndex < len(JsonInfo[projectIndex].Environments):}}
    <div class = "panel panel-default">
    <li class = "subProjectName">Flippin' Meat</li>
            <li>Started @ 5:30PM</li>
            <li class = "difBack">Finished @ 6:00 PM</li>
            <li class = "difBack url">Project Code: 54</li>
            <li class = "build">Subproject Code: 178</li>
            <a href = https://www.google.com/search?q=how+to+flip+burgers class = "siteUrl"}></a>
            <li>Branch: Memphis</li>
        </div>
        {{environmentIndex+=1}}
        {{pass}}
        </div>
    {{projectIndex+=1}}
    {{pass}}
</body>

这里是 CSS 我用来在 div 居中创建损坏的垃圾尝试：

html{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    background-color: black;
}

.projectName{
    font-size: 20pt;
    font-weight: italic;
    font-family: "Franklin Gothic" , Serif;
    margin-left: 60px;
    color: white;
    clear: both;
    text-align: left;
}

.panel-wrapper{
    text-align: center;
}

.panel{
    color:#E3E3ED;
    text-align: center;
    background-color:#148214;
    width: 350px;
    height: 300px;
    border: 1px solid #828282;
    display: inline-block;
}

.panel.failed{
    background-color: #CF0000;
}

.panel.disabled{
    background-color: #505050;
}

.subProjectName{
    font-size: 20pt;
    font-weight: bold;
    color: black;
    background-color: silver;
}

li{
    font-size: 16pt;
    text-align: center;
    list-style-type: none;
    margin: 5px 0px; 
}

.difBack{
    background-color: black;
    margin: 0px;
}

a{
    color:#E3E3ED;
    text-decoration: none;
}

a:hover {
    color: #1975FF;
    text-decoration: underline;
}

.siteUrl:hover{
    color: #0033CC;
}

.build{
    font-size: 13pt;
}

span{
    color:silver;
}

如您所见，我已经尝试在我的包装器中使用 text-align: center div。我还尝试在包装器 div 和包装器 div 上使用 margin: 0 auto ，但这也是无效的。

如有任何帮助，我们将不胜感激。谢谢！

编辑： 生成的 HTML 已被删除，因为它不是理解 CSS 问题的组成部分。

Answer 1

水平对齐是正确的，但垂直对齐是错误的。根据我的经验，这可以通过明确指定垂直对齐来解决。这可以通过如下更新 CSS 来完成：

.panel{
    vertical-align: top;
    /* ... */
}

这将确保每个面板都按预期对齐。

Web2Py 居中 Div

Web2Py Centering Divs

html

css

web2py