Question

如何使<td>中的文字居中？

我试过了：

<style>
.float_center {
    float: right;    
    position: relative;
    left: -50%; /* or right 50% */
    text-align: left;
}
</style>

结果我得到了，见下图。

完全参考：

<script src="http://whspr.epizy.com/bootstrap/users/js/bootstrap.min.js"></script>
<link href="http://whspr.epizy.com/bootstrap/users/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/users/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://whspr.epizy.com/assets/styles.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Invoice</title>
</head>

<body>
  <center>
    <div class="container">
      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container-fluid">
            <center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>

            <!--/.nav-collapse -->
          </div>
        </div>
      </div>
      <style>
        .float_center {
          float: right;
          position: relative;
          left: -50%;
          /* or right 50% */
          text-align: left;
        }
      </style>
      <table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
        <tr>
          <td colspan="4">
            <h1><span class="float_center">Company</span></h1>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <h1><span class="float_center">Number</span></h1>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
          </td>
          <td colspan="2">
            <h3><span style="float: right;">Date</span></h3>
          </td>
        </tr>

        <tr>
          <th>Sr.</th>
          <th>Item</th>
          <th>Qty</th>
          <th>Amount</th>
        </tr>
        <tbody>
          <tr>
            <td>1</td>
            <td>Shirt (D.C)</td>
            <td>5</td>
            <td>200</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Shirt (Iron)</td>
            <td>5</td>
            <td>200</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
            <td><strong>Total:</strong></td>
            <td><strong>400</strong></td>
          </tr>
        </tbody>
      </table>


    </div>


    <!-- Latest compiled and minified JavaScript -->

  </center>
</body>

</html>

Answer 1

只需将text-center默认引导类添加到h1的中心文本中，也无需在span中添加h1标记

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <center>
                    <button class="btn btn-large btn-success" onClick="window.print()">Print</button>
                </center>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
        <tr>
            <td colspan="4">
                <h1 class="text-center">Company</h1>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <h1 class="text-center">Number</h1>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
            </td>
            <td colspan="2">
                <h3><span style="float: right;">Date</span></h3>
            </td>
        </tr>
        <tr>
            <th>Sr.</th>
            <th>Item</th>
            <th>Qty</th>
            <th>Amount</th>
        </tr>
        <tbody>
            <tr>
                <td>1</td>
                <td>Shirt (D.C)</td>
                <td>5</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shirt (Iron)</td>
                <td>5</td>
                <td>200</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
                <td><strong>Total:</strong></td>
                <td><strong>400</strong></td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

你可以用：

display: block;
text-align: center;

在.float_center而不是您目前拥有的内容。

下面：

＆＃13;

<script src="http://whspr.epizy.com/bootstrap/users/js/bootstrap.min.js"></script>
<link href="http://whspr.epizy.com/bootstrap/users/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/users/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://whspr.epizy.com/assets/styles.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="http://whspr.epizy.com/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Invoice</title>
</head>

<body>
  <center>
    <div class="container">
      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container-fluid">
            <center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>

            <!--/.nav-collapse -->
          </div>
        </div>
      </div>
      <style>
        .float_center {
          display: block;
          text-align: center;
        }
      </style>
      <table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
        <tr>
          <td colspan="4">
            <h1><span class="float_center">Company</span></h1>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <h1><span class="float_center">Number</span></h1>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
          </td>
          <td colspan="2">
            <h3><span style="float: right;">Date</span></h3>
          </td>
        </tr>

        <tr>
          <th>Sr.</th>
          <th>Item</th>
          <th>Qty</th>
          <th>Amount</th>
        </tr>
        <tbody>
          <tr>
            <td>1</td>
            <td>Shirt (D.C)</td>
            <td>5</td>
            <td>200</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Shirt (Iron)</td>
            <td>5</td>
            <td>200</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
            <td><strong>Total:</strong></td>
            <td><strong>400</strong></td>
          </tr>
        </tbody>
      </table>


    </div>


    <!-- Latest compiled and minified JavaScript -->

  </center>
</body>

</html>

＆＃13;

Answer 3

使用text-align: center

＆＃13;

<button onClick="window.print()">Print</button>
<table>
  <tr>
    <td colspan="4" style="text-align: center">
      Company
    </td>
  </tr>
  <tr>
    <td colspan="4" style="text-align: center">
      Number
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h3><span>Cutomer (Invoice No.)</span></h3>
    </td>
    <td colspan="2">
      <h3><span>Date</span></h3>
    </td>
  </tr>
  <tr>
    <th>Sr.</th>
    <th>Item</th>
    <th>Qty</th>
    <th>Amount</th>
  </tr>
  <tbody>
    <tr>
      <td>1</td>
      <td>Shirt (D.C)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shirt (Iron)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
      <td><strong>Total:</strong></td>
      <td><strong>400</strong></td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

您可以将其添加到内联样式

style="text-align: center";

但是如果你使用bootstrap，那么只需添加一个bootsrap类

class="text-center"

Answer 5

直接写

read

在h1 {text-align: center;}标记中删除<style>类样式 **

使用Flex：

或修改您的float_center课程

.float_center

表格列

5 个答案: