सीएसएस के साथ एक तालिका सेल में सही संरेखित करें

128

मेरे पास इस तरह का पुराना क्लासिक कोड है

<td align="right">

यह क्या कहता है: यह सही सेल में सामग्री संरेखित करता है। इसलिए यदि मैं इस सेल में 2 बटन लगाता हूं, तो वे सेल के दाईं ओर दिखाई देंगे।

लेकिन फिर मैं इसे सीएसएस के लिए वापस कर रहा था, लेकिन सही संरेखण जैसी कोई चीज नहीं है? मैं पाठ-संरेखण देख रहा हूं, क्या यह वही है?

css

— मिशेल
स्रोत

154

उपयोग

text-align: right

पाठ-संरेखित सीएसएस संपत्ति यह बताती है कि पाठ की तरह इनलाइन सामग्री अपने मूल ब्लॉक तत्व में कैसे संरेखित है। पाठ-संरेखण ब्लॉक तत्वों के संरेखण को नियंत्रित नहीं करता है, केवल उनकी इनलाइन सामग्री।

देख

पाठ संरेखित

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

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

— राहुल
स्रोत

5

एक <इनपुट प्रकार = "बटन"> एक ब्लॉक तत्व है, क्योंकि एक सही संरेखित नहीं होता है?

— मिशेल

1

निर्भर करता है। मेरे पास एक पैराग्राफ है, जो टेबल सेल (सीएसएस डिस्प्ले: टेबल-सेल) के अंदर ब्लॉक है, और अगर मैं उस पैराग्राफ को 100% की चौड़ाई देता हूं तो यह टेक्स्ट-संरेखित अधिकार का सम्मान करना शुरू करता है। मुझे लगता है कि एक चौड़ाई को परिभाषित करना हमेशा सबसे अच्छी बात नहीं होती है।

— कोस्टा

3

मैं इसे तब लेता हूं, text-alignजब यह बटन और नियंत्रण के साथ-साथ पाठ पर भी लागू होता है , तो संपत्ति बहुत अच्छी तरह से नामित नहीं होती है। शायद यह कहा जाना चाहिए था content-align?

— बेन

3

मिशेल: ब्लॉक तत्व को इनलाइन-ब्लॉक में सेट करें, जैसे: td इनपुट {डिस्प्ले: इनलाइन-ब्लॉक; }

— shalamos

1

या मुझे केवल फ्लोट काम करता है: सही या अच्छा पुराना संरेखण = "सही"। wtf?

— टोन स्कोडा

7

मेरे लिए अब क्या काम है:

सीएसएस:

.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>

निम्नलिखित पहेली देखें:

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

— Joysn
स्रोत

6

CSS3 के 'nth-child' चयनकर्ता के बारे में मत भूलना। यदि आप उस कॉलम के इंडेक्स को जानते हैं जिसे आप टेक्स्ट को दाईं ओर संरेखित करना चाहते हैं, तो आप निर्दिष्ट कर सकते हैं

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

बड़ी तालिकाओं वाले मामलों में यह आपको बहुत सारे अतिरिक्त मार्कअप से बचा सकता है!

यहाँ हाँ के लिए एक पहेली है .... https://jsfiddle.net/w16c2nad/

— सुइट 404 नहीं मिला
स्रोत

महान: सबसे आसान और साफ समाधान मैंने देखा।

— ncrypticus

2

`td`सेल में ब्लॉक एलिमेंट्स को कैसे रखें

प्रदान किए गए उत्तर एक tdसेल में पाठ को सही-संरेखित करने के लिए बहुत अच्छा काम करते हैं ।

जब आप स्वीकार किए गए उत्तर में टिप्पणी के रूप में एक ब्लॉक तत्व को संरेखित करना चाहते हैं तो यह समाधान नहीं हो सकता है। एक ब्लॉक तत्व के साथ इसे प्राप्त करने के लिए, मैंने इसे मार्जिन का उपयोग करने के लिए उपयोगी पाया है;

सामान्य वाक्यविन्यास

selector {
  margin: top right bottom left;
}

सही ठहराओ

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

केंद्र का औचित्य सिद्ध करें

td {
  margin: auto auto auto auto;
}

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

मध्य में संरेखित करें

td {
  margin: auto;
}

जेएस फिडेल उदाहरण

वैकल्पिक रूप से, यदि आप एक विकल्प है, तो आप tdसामग्री को प्रदर्शित कर सकते हैं inline-block, लेकिन यह उसके बाल तत्वों की स्थिति को बिगाड़ सकता है।

— जॉन मुतुमा
स्रोत