Блог

Я пытаюсь сделать текст в столбцах таблицы центральным, но даже после изменения HTML и CSS это, похоже, не работает. Я использую весну в качестве основы. HTML выглядит следующим образом:

 <form>

        <table class="box-element" th:if="${ not#lists.isEmpty(kitchenRecipes)}">
            <div class="header">Available meals</div>
            <tr>
                <th style="padding-left: 50px">Image</th>
                <th>Meal</th>
                <th>Calories</th>
                <th>Order</th>
            </tr>
            <tr th:each="kitchenRecipe : ${kitchenRecipes}">
                <td style="float: left!important; margin-left: 10px!important;"><img class="row-image" src="https://www.pikpng.com/pngl/b/64-643199_simple-food-coming-soon-food-clipart.png"></td>
                <td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.title}"></a></td>
                <td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.calories}"></a>Calories</td>
                <td style="text-align:center; vertical-align: middle;"><a th:href="@{/order/{kitchenId}/{recipeId}(kitchenId=${kitchenRecipe.kitchenDto.id},recipeId=${kitchenRecipe.recipeDto.id})}">View</a></td>
            </tr>
        </table>
</form>
 

И CSS-это:

 .box-element{
    box-shadow:hsl(0, 0%, 90%) 10 10 16px;
    background-color: #ff416c;
    border-radius: 4px;
    padding: 10px;
    margin-bottom:30px;
    background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
    background: linear-gradient(to right, #ff4b2b, #ff416c);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    text-align: center;
    vertical-align: middle;
}

.header {
   background: #ff416c;
   background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
   background: linear-gradient(to right, #ff4b2b, #ff416c);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 0;
   color: white;
   font-size: 1.5em;
   padding: 1rem;
   text-align: center;
   text-transform: uppercase;
}
 

Но стол выглядит так:

Я не уверен, почему ни HTML, ни CSS не решают эту проблему. Любая помощь будет признательна.