सीएसएस में तालिका td में केंद्र छवि

Question

मैं तालिका td के केंद्र में एक छवि संरेखित करने की कोशिश कर रहा हूं। इसने मार्जिन-सेट को एक विशिष्ट मूल्य पर सेट करने के साथ काम किया, लेकिन इसने td के आकार को भी बढ़ाया और यह वही नहीं है जो मैं चाहता था

क्या ऐसा करने के कोई कुशल तरीके हैं? मैंने मेज की ऊंचाई और विटध के लिए प्रतिशत का उपयोग किया।

Comments

संबंधित प्रश्न: stackoverflow.com/questions/8639383/… माता-पिता (यहाँ td) को टेक्स्ट-संरेखित करने की एक शैली देने के अलावा: केंद्र, आपको बच्चे को (यहाँ, img) प्रदर्शन की एक शैली देनी होगी: ब्लॉक या प्रदर्शन : इनलाइन-ब्लॉक

— mathheadinclouds 14

Answer 1

<td align="center">

या सीएसएस के माध्यम से, जो किसी भी अधिक पसंदीदा विधि है ...

<td style="text-align: center;">

Comments

ओपी पर ध्यान दें ... स्कॉट के दूसरे विकल्प का उपयोग करें क्योंकि HTML5 में 'संरेखित' का समर्थन नहीं किया जा रहा है

— isNaN1247

तो हम HTML5 को कैसे पार कर सकते हैं?

— बेस्ट

आप HTML5 को पार नहीं करते हैं .. आप इसके लिए अनुकूल हैं। @beardtwizzle .. कि जोड़ने के लिए धन्यवाद।

— स्कॉट 12

क्या हो अगर मैं चाहता हूं कि यह ऊपर से भी केंद्रित हो

— सोहैब

@ साइलेंटप्रो<td style="text-align: center; vertical-align: middle;">

— स्कॉट

Answer 2

सीएसएस में html5 के लिए इसे करने का सरल तरीका:

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

मेरे लिए पूरी तरह से काम किया।

Comments

यह पूरी तरह से काम करता है; <td style = "text-align: center;"> काम नहीं करता है, <td align = "center"> काम करता है, लेकिन HTML5 में समर्थित नहीं है

— user2431763

Answer 3

मार्जिन का उपयोग करके td के अंदर एक div केंद्र करें, चाल को div चौड़ाई को छवि चौड़ाई के समान बनाने के लिए है।

<td>
    <div style="margin: 0 auto; width: 130px">
          <img src="me.jpg" alt="me" style="width: 130px" />
    </div>
</td>

Comments

@ साइक वास्तव में नहीं, <div>अधिकांश ईमेल से छीन लिए गए हैं और अच्छा अभ्यास नहीं माना जाता है।

— crampicco

Answer 4

यह मेरे लिए तय मुद्दों:

<style>
.super-centered {
    position:absolute; 
    width:100%;
    height:100%;
    text-align:center; 
    vertical-align:middle;
    z-index: 9999;
}
</style>

<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center"     valign="middle" > 
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>

Comments

यह मेरे लिए भी निश्चित मुद्दा है, लेकिन इमेज टैग में, टेबल या td टैग में नहीं

— सुमन बप्पी

Answer 5

<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>

या

td
{
    text-align:center;
}

CSS फ़ाइल में

Answer 6

अपनी सीएसएस में अपनी छवि के साथ एक निश्चित सेट करें और autoछवि पर एक- उमंग / गद्दी जोड़ें ...

div.image img {
    width: 100px;
    margin: auto;
}

या text-alignकेंद्र में सेट करें ...

td {
    text-align: center;
}

Answer 7

td image 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Comments

महान सामान्य उत्तर

— दान

Answer 8

एक अन्य विकल्प के <th>बजाय उपयोग है <td>। <th>केंद्र के लिए चूक; <td>छोड़ दिया करने के लिए चूक।

Comments

मैंने तय किया है कि आपके लिए, लेकिन भविष्य में वे HTML तत्वों के दोनों ओर बैकटिक्स (`) का उपयोग करें ताकि यह सुनिश्चित हो सके कि वे प्रदर्शित हैं।

— जेरेमी कैनी

Answer 9

मेरे विश्लेषण और इंटरनेट पर भी खोज के अनुसार, मुझे चित्र को लंबवत रूप से केंद्रित करने का एक तरीका नहीं मिला, <div>इसका उपयोग केवल <table>तालिका का उपयोग करके संभव है क्योंकि निम्नलिखित संपत्ति प्रदान करता है:

valign="middle"

Comments

HTML5 में असमर्थित होने के बाद से इस सुझाव की सलाह नहीं दी जाती है। वर्टिकल-अलाइन के साथ CSS स्टाइल या क्लास का उपयोग करने के लिए बेहतर है: कॉलम या कंटेनर पर लगाया गया मध्य।

— mbokil