Search code examples
htmlcss

Flask/Jinja content not centering

I am trying to style all of my web page's content with CSS, but noticed that everything changes except for the scrambled words. Here is a screenshot showing my page:

Boggle webpage

What could be causing this issue? I've disabled caching, gave classes to the table row and table data elements that contain the letters as well covered the whole form in a wrapper and applied the css to those classes, but error persists. FIY I am using Jinjga templating. Here is my code:

CSS

.main-content,
.row{
    text-align: center;
}
h3 {
    color: red
}

FLASK/JINJA

{% extends 'base.html' %}
{% block title %}Board Form{% endblock %}

{% block content %} 
<div class='main-content'>
<table>
    <tbody>
    {% for list in board %}
    <tr class="row">
    {% for char in list %}
        <td>{{char}}</td>
    {% endfor %}
    </tr>
    {% endfor %}
    </tbody>
</table>
<form id="form" method="POST">
    <input id="guess" type="text" placeholder="Enter a guess" name="guess">
    <input id="btn" type="submit" value="Submit">
</form>
<h3></h3>
<h1></h1>
<p>User has played {{ session["count"] }} times(s)</p>
<p>Highest Score: <b>{{ session["highest_score"] }}</b></p>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="/static/app.js"></script>
</div>
{% endblock %}

PYTHON

@app.route('/')
def create_board():
    """
    Root Route that creates game board 
    and stores it in session
    """
    board = boggle_game.make_board()
    session["board"] = board

    return render_template('board.html', board=board)
Solution

  • You can add to your main.css file following code:

    .center {
  margin-left: auto;
  margin-right: auto;
}

    Then change with the following line instead of table tag in board.html

    <table class="center">