Web2Py Centering Divs

时间：2015-08-06 16:05:09

标签： html css web2py

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

这样的事情是我的目标：

每组面板水平居中。我试图实现我的目标，但我很难将这些小组集中在一起。当我尝试使用包装器div和text-align：center对面板进行居中时，这是我收到的结果：My major problem

这是我的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>

这是我用来创建以div为中心的受损垃圾尝试的CSS：

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;
}

正如您所看到的，我在包装器div中尝试了text-align：center。我也尝试在包装器div和包装的div上使用margin：0 auto，但这也是无效的。

任何和所有帮助将不胜感激。谢谢！

编辑：已删除生成的HTML，因为它不是理解CSS问题的必要条件。

1 个答案:

答案 0 :(得分：1)

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

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

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

相关问题
最新问题