对于一个网站,我正在使用Bootstrap Material Design,并且很难对齐一行中的元素(course.name
和course.update
,course.delete
按钮(。
我希望它们与 CSS 垂直对齐,但vertical-align:middle
不起作用。<tr valign="middle">
也没有.
任何帮助,不胜感激。
{% if course_list %}
<table class="table table-hover">
<tr>
<th>Course Name</th>
</tr>
{% for course in course_list %}
<tr>
<td><a class="text-nowrap" href="{% url "courses.detail" course.id %}">{{ course.name }}</a>
{% if course.instructor == user %}
<div class="pull-right">
{% url 'courses.update' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Edit' button_class='btn-warning' href=url %}
{% url 'courses.delete' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Delete' button_class='btn-danger' href=url %}
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
首先你的表没有响应,要让它响应,做这样的结构
<div class="table-responsive">
<table class="table table-bordered table-striped">
//rest of your code
</table>
</div>
它将使您的表格响应迅速,并且
.table td {
text-align: center;
}
或
<td class="text-center">some text</td>
使其居中对齐