căn chỉnh ngay trong một ô của bảng với CSS

128

Tôi có mã cổ điển cũ như thế này

<td align="right">

Nó thực hiện những gì nó nói: nó đúng căn chỉnh nội dung trong ô. Vì vậy, nếu tôi đặt 2 nút trong ô này, chúng sẽ xuất hiện ở đúng vị trí của ô.

Nhưng sau đó tôi đã cấu trúc lại điều này thành CSS, nhưng không có thứ gì là đúng? Tôi thấy văn bản phù hợp, đó là giống nhau?

css

— Michel
nguồn

154

Sử dụng

text-align: right

Thuộc tính CSS căn chỉnh văn bản mô tả cách nội dung nội tuyến như văn bản được căn chỉnh trong thành phần khối chính của nó. text-align không kiểm soát sự liên kết của chính các thành phần khối, chỉ nội dung nội tuyến của chúng.

Xem

căn chỉnh văn bản

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— rahul
nguồn

5

là <input type = "button"> một phần tử khối vì cái đó không được căn chỉnh phải không?

— Michel

1

Nó phụ thuộc. Tôi có một đoạn, là khối, bên trong một ô của bảng (hiển thị css: ô bảng) và nếu tôi cho đoạn đó có chiều rộng 100% thì nó bắt đầu tôn trọng văn bản bên phải. Tôi giả sử xác định chiều rộng không phải lúc nào cũng là điều tốt nhất.

— Costa

3

Tôi lấy nó sau đó, rằng tài sản text-alignkhông được đặt tên rất tốt nếu nó áp dụng cho các nút và điều khiển cũng như văn bản. Có lẽ điều này nên được gọi là content-align?

— Ben

3

Michel: đặt thành phần khối thành khối nội tuyến, ví dụ: td input {display: inline-block; }

— shalamos

1

hoặc tôi chỉ hoạt động nổi: đúng hoặc tốt cũ align = "đúng". wtf?

— Giai điệu Škoda

7

Những gì làm việc cho tôi bây giờ là:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

Xem các câu đố sau:

http://jsfiddle.net/Joysn/3u3SD/

— Niềm vui
nguồn

6

Đừng quên bộ chọn 'nth-child' của CSS3. Nếu bạn biết chỉ mục của cột bạn muốn căn chỉnh văn bản ở bên phải, bạn có thể chỉ định

table tr td:nth-child(2) {
    text-align: right;
}

Trong trường hợp với các bảng lớn, điều này có thể giúp bạn tiết kiệm rất nhiều đánh dấu thêm!

đây là một câu đố cho bạn .... https://jsfiddle.net/w16c2nad/

— Không tìm thấy bộ 404
nguồn

Tuyệt vời: giải pháp dễ dàng và sạch nhất tôi thấy.

— ncrypticus

2

Cách định vị các phần tử khối trong một `td`ô

Các câu trả lời được cung cấp thực hiện một công việc tuyệt vời để căn chỉnh văn bản trong một tdô.

Đây có thể không phải là giải pháp khi bạn đang tìm cách căn chỉnh một yếu tố khối như đã nhận xét trong câu trả lời được chấp nhận. Để đạt được điều đó với một phần tử khối, tôi đã thấy nó hữu ích khi sử dụng lề;

cú pháp chung

selector {
  margin: top right bottom left;
}

biện minh đúng

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

trung tâm thanh minh

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

căn giữa

td {
  margin: auto;
}

Ví dụ về Fiddle

Ngoài ra, bạn có thể làm cho bạn tdhiển thị nội dung inline-blocknếu đó là một tùy chọn, nhưng điều đó có thể làm sai lệch vị trí của các yếu tố con của nó.

— John Mutuma
nguồn