Question

我有下表。我想要的是将每个td的内容定位在其中间（居中）并保持文本左对齐。数据将是动态的，我希望保持表的响应。

<table class="table table-hover">

    <tr>
       <td><a href="">Inter Milan</a></td>
       <td><span class="label label-default">0 - 1</span></td>
       <td><a href="">Lazzio Roma</a></td>
    </tr> 

    <tr>
       <td><a href="">Bayern Munich</a></td>
       <td><span class="label label-default">3 - 3</span></td>
       <td><a href="">Herta Berlin</a></td>
    </tr>

</table>

我尝试使用CSS

解决它

table td {
  text-align: center;
}

但我仍然希望文本保持对齐（例如，Inter和Bayern在相同的对齐级别）。

请注意，我在同一页面上的不同表格上使用 table-layout：fixed ，以在不同的表格上保持相同的布局。

Answer 1

你可以玩填充：

throw

td:nth-child(1) a{
  padding-left: 25%;
}

可能有一个更好的解决方案，但我希望它有点帮助

Answer 2

试试这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-bordered text-center">
  <tr>
    <td><a href="">Inter Milan</a></td>
    <td><span class="label label-default">0 - 1</span></td>
    <td><a href="">Lazzio Roma</a></td>
  </tr>
  <tr>
    <td><a href="">Bayern Munich</a></td>
    <td><span class="label label-default">3 - 3</span></td>
    <td><a href="">Herta Berlin</a></td>
  </tr>
</table>

Answer 3

这几乎是我能找到的最佳解决方案。我左对齐第一列，居中第二列，右对齐最后一列。我添加了一个开始和结束的tds，以便将内容放在中心。我不知道你是否可以将它美化为更好的一个。如果没有，它是一个很好的解决方案：）

import sys

def exitInput(prompt):
  pInput = input(prompt)
  return pInput if pInput != "exit" else sys.exit()

def inputs():
  first = exitInput("Enter your first name: ")
  last = exitInput("Enter your last name: ")
  gender = exitInput("Enter your gender: ")
  form = exitInput("Enter your form: ")
  file = open("signup.txt", "a")
  file.write("\nFirst name: "+first+", Last name: "+last+", Gender: "+gender+", Form: "+form)
  file.close()

inputs()

Bootstrap td以文本左对齐为中心

3 个答案: