Cannot get text to center in items on template

Using Django Templates & Frontend
1

I am trying to center text in boxes on my template. The boxes all display just fine but no matter what I set in the css file the text is not quite centered vertically, but fine horizontally. I’ve used padding to make it better but it’s still not quite right since the text is not always the same number of lines in the item.

css ( A mess of stuff now, I’ve tried various different combinations of the align settings):

th, td {
    text-align: center;
    vertical-align: middle;
  }
  

  table{
    width: 100vw;
    margin:auto;
  }

  .item_LoO_Name {
    width: 8vw;
    height: 10vh;
    align-content: center;
    background-color: black;
    border: 2px solid black;
    display: inline-block;
    color: white;
    border-radius: 15px;
    box-sizing: border-box;
    vertical-align: middle;
    margin-bottom: 4px;
    font-size: 2vh;
    font-weight: bold;
    padding: 2.5vh 0;
  }

  .item_Outcome_Name {
    width: 8vw;
    height: 10vh;
    align-content: center;
    background-color: white;
    border: 2px solid black;
    display: inline-block;
    color: black;
    border-radius: 15px;
    box-sizing: border-box;
    vertical-align: middle;
    font-size: 1.5vh;
    font-weight: bold;
    padding: .5vh
    }

.Objective {
      width: 8vw;
      height: 8vh;
      margin: auto;
      align-content: center;
      background-color: white;
      color: black;
      border: 2px solid black;

      display: inline-block;
      vertical-align: middle;
      text-align: center;
      font-size: 1.5vh;
      border-radius: 15px;
      box-sizing: border-box;
      justify-content: center;
      
}

Template:

{% extends "Dashboard/layoutreview.html" %}

{% block content %}





  <!--
  {% if data_entry_button != 1 %}
  <div class='themetext'>Themes</div>
  {% endif %}
  -->
<table>
  <!--Create LOO shape and iterate through rows>-->
 {% for objtext in rows %}  
 <tr><td>

  <!--Create row of topic shapes and spacer between shapes and apply status color-->


         {% for a_text in objtext %}

            {% if a_text.objective_position == 1 %}
              <div class="item_LoO_Name">
                {{ a_text.objective_text|linebreaks}}</div>
            {% else %}
              {% if a_text.objective_position != 10 %}
                  <div class="space"></div>
                  <a href="{% url 'drilldown' a_text.id %}" >
                 <div class="Objective" style= 'background-color:{{ a_text.objective_background }}' title='{{ a_text.objective_color }}' aria-label='Status is {{ a_text.objective_color }}'>
                        {{ a_text.objective_text|linebreaks}}</div>
                <!-- Adds color as text in Objective if needed for color blind users
                 <span><div class="Objective" style= 'background-color:{{ a_text.objective_background }}' title='{{ a_text.objective_color }}' aria-label='{{ a_text.objective_color }}'>
                        {{ a_text.objective_text|linebreaks}}<c>{{ a_text.objective_color }}</b> </div></span>-->
                 </a>
              {% else %}  
              
              <!--Create pointed arrow and space to Outcome-->

                <div class="space"></div>
                <div class="triangle-right"></div>
                <div class="spaceblank"></div>
                <div class="item_Outcome_Name">
                    {{ a_text.objective_text|linebreaks}}</div>
              {% endif %} 
            {% endif %}
                  {% endfor %}

          {% endfor %}
  </td>  
            
  </table>

  <!--
  {% if data_entry_button != 1 %}
  <div class='outcometext'>Outcomes</div>
  {% endif %}
  -->
{% endblock %}
2

This is nothing to do with Django, but is CSS.

I tried googling “table header css center vertically” and everything said to use the vertical-align CSS propertyk which is what I’d have suggested.

For what it’s worth, the best way to get help with something that’s purely to do with CSS and HTML is to reduce the problem to the minimum amount of CSS and HTML (not Django templating language) that demonstrates the issue. Then it’s easier for someone else to try it out.

3

Thanks. I had expected the vertical-align to do that a well but for some reason it is off middle slights. It appears to be applied because if I remove it the ntire item goes off center. I’ve decided to see if a flex box is a better solution.

4

Yeah I don’t understand why you’re using a table at all because from what little I can tell this isn’t a table of data. But as I say it’s hard for anyone to help without an easy to use example.

5

Found the problem, it turned out to be:

               {{ a_text.objective_text|linebreaks}}

The linebreaks must have introduced a new line at the end of the text. Removing |linebreaks fixed the alignment issue.

If I need them I should probably format and use |safe.

The table is one of my (many) bad programming habits from Fortran and VBA days. Tables in Word were an easy way to draw some graphics, so I carried over that bad practice.

Anyway, I am using a flexbox instead which has introduced a new issue tha if I can’t solve I’ll post it.

6

Fixed it as explained here: