发表新帖
发表新帖

Text-align class for inside a table

后端 未结
关注
20 1242
灰色年华
灰色年华 2020-11-28 00:10

Is there a set of classes in Twitter\'s Bootstrap framework that aligns text?

For example, I have some tables with $ totals that I want aligned to the r

相关标签:
20条回答
  • 孤街浪徒
    2020-11-28 00:54

    You can use this CSS below:

    .text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
    0 讨论(0)
  • 野性不改
    2020-11-28 00:55

    Here is a short and sweet answer with an example.

    table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

    0 讨论(0)
  • 情深已故
    2020-11-28 00:56

    The following lines of code are working properly. You can assign the classes like text-center, left or right, The text will align accordingly.

    <p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

    Here there isn't any need to create any external class. These are the Bootstrap classes and have their own property.

    0 讨论(0)
  • 悲哀的现实
    2020-11-28 00:56

    Expanding on David's answer, I just add a simple class to augment Bootstrap like this:

    .money, .number {
    text-align: right !important;
}
    0 讨论(0)
  • 予麋鹿
    2020-11-28 00:57

    I guess because CSS already has text-align:right, AFAIK, Bootstrap doesn't have a special class for it.

    Bootstrap does have "pull-right" for floating divs, etc. to the right.

    Bootstrap 2.3 just came out and added text alignment styles:

    Bootstrap 2.3 released (2013-02-07)

    0 讨论(0)
  • 说谎
    2020-11-28 00:58

    Just add a "custom" stylesheet which is loaded after Bootstrap´s stylesheet. So the class definitions are overloaded.

    In this stylesheet declare the alignment as follows:

    .table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

    Now you are able to use the "common" alignment conventions for td and th elements.

    0 讨论(0)
 看不清?
提交回复
热议问题