html - 表格列中的 HTML 文本不会居中对齐 (Spring)
问题描述
我试图在表格中心的列中制作文本,但即使在更改 HTML 和 CSS 之后,它似乎也不起作用。我使用spring作为框架。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 都没有解决这个问题。任何帮助,将不胜感激。
解决方案
推荐阅读
- android - 如何确保新的 NFC 意图在屏幕关闭/再次打开后传递给我的活动?
- python - 如何修复这个精灵类的移动(敌人)
- ptrace - 关于使用 PTRACE_GETSIGMASK 和 PTRACE_SETSIGMASK 的 AC 示例?
- swift - 如何通过 url 将图像直接从 Google Drive 上传到 ImageView?
- python - OSX上python virtualenv中mysqlclient的问题
- html - 如何使用 ajax 调用在 html div 中显示 xml 文件的内容?
- excel - VBA:从另一个工作表复制图片问题;剪贴板不清除?
- swift - 使用 API 状态监听设备变化确实发生了变化
- grails - Grails Groovy MVC:批量更新从更新 [0] 返回了意外的行数;
- sharepoint - SharePoint Online 每年重置 ID 号