CODEWITHSUNDEEP
htmlcssweb2py
fastbreak78
fastbreak78

Reputation: 95

Web2Py Centering Divs

I am working on programming a dashboard to display attributes of the projects that my company is working on. These attributes will later be pulled from an API, but I am currently parsing them from a JSON file.

Something like this is my goal:

Where each set of panels is centered horizontally. I have attempted to achieve my goal, but I am having trouble centering the groups of panels. When I attempt to center the panels using a wrapper div and text-align: center, this is the result I receive: My major problem

Here is my HTML/Python code: 

{{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>

And here is the CSS I am using to create the mangled garbage attempt at centering the 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;
}

As you can see, I have tried text-align: center in my wrapper div. I have also attempted using margin: 0 auto on both the wrapper div and the wrapped div, but that was also ineffective.

Any and all help would be appreciated. Thanks!

Edit: The generated HTML has been removed because it was not integral to the understanding of the CSS issue.

Upvotes: 2

Views: 138

Answers (1)

TAS
TAS

Reputation: 2079

The horizontal alignment is correct, but it is the vertical alignment is incorrect. In my experience this can be solved by explicitly specifying the vertical alignment. This can done by updating the CSS as follows:

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

This will ensure that each of the panels are aligned as expected.

Upvotes: 1

Related Questions