2010-11-29 17 views
15

में लिंक कैसे केंद्रित करें मैं वास्तव में एचटीएमएल के लिए नया हूं और सोच रहा था कि आप एचटीएमएल के साथ कई लिंक कैसे केंद्रित करते हैं?एचटीएमएल

मैं कोशिश कर दिया गया है:

<a href="http//www.google.com"><p style="text-align:center">Search</a> 

लेकिन समस्या यह है कि जब मैं उदाहरण के लिए इसके पीछे अन्य लिंक डाल करने के लिए प्रयास करें:

<a href="http//www.google.com"><p style="text-align:center">Search</a><a href="Contact Us"><p style="text-align:center">Contact Us</a></p> 

यह सिर्फ अलग पंक्ति में उन्हें देता है। मेरा मानना ​​है कि यह <p> फ़ंक्शन के कारण हो रहा है ... लेकिन मुझे केवल HTML पता है, मुझे पता है कि आप इसे सीएसएस में कर सकते हैं लेकिन मैं सोच रहा था कि यह सिर्फ HTML का उपयोग करके किया जा सकता है।

किसी भी मदद के लिए धन्यवाद!

उत्तर

24

वहाँ अपने कोड में कुछ गलतियां कर रहे हैं - पहला:

<a href="http//www.google.com"><p style="text-align:center">Search</p></a> 

अगले: क्या आप p -tag बंद कर दिया havn't p 'पैरा' के लिए खड़ा है और एक ब्लॉक तत्व है (इसलिए यह पैदा एक लाइन ब्रेक)। क्या आप उपयोग करना चाहते थे वहाँ एक span है, जो प्रारूपण के लिए सिर्फ एक इनलाइन तत्व है:

<a href="http//www.google.com"><span style="text-align:center">Search</span></a> 

लेकिन अगर आप सिर्फ अपने लिंक करने के लिए एक शैली जोड़ना चाहते हैं, यही कारण है कि आपको लगता है कि के लिए शैली निर्धारित नहीं करते सीधे लिंक:

<a href="http//www.google.com" style="text-align:center">Search</a> 

अंत में, यह कम से कम सही एचटीएमएल होगा, लेकिन अभी भी नहीं कि वास्तव में आप क्या चाहते हैं, क्योंकि text-align:center पाठ उस तत्व केन्द्रों, आप के लिए है कि सेट करने के लिए होता तो तत्व कि में शामिल हैं यह लिंक (यह टुकड़ा ओ च एचटीएमएल पोस्ट किया जाता है नहीं, तो मैं आप को सही नहीं कर सकते, लेकिन मैं आप समझ आशा) - यह दिखाने के लिए, मैं एक साधारण div का उपयोग करेंगे:

<div style="text-align:center">  
    <a href="http//www.google.com">Search</a> 
    <!-- more links here --> 
</div> 

संपादित करें: करने के लिए कुछ और अतिरिक्त अपने प्रश्न:

  • p एक 'समारोह' नहीं है, लेकिन तुम सही हो, इस समस्या का कारण है (क्योंकि यह एक ब्लॉक तत्व है)
  • क्या आप उपयोग करने के लिए कोशिश कर रहे हैं सीएसएस है - यह एक सेपर में रखा जाने के बजाय सिर्फ इनलाइन है ते फ़ाइल, लेकिन आप 'बस HTML' यहाँ
+0

पी तत्व के लिए अंत टैग ** है * * एचटीएमएल में वैकल्पिक। – Quentin

+0

नीचे दिए गए लोगों ने भी आपके आखिरी बिंदु को कवर किया ताकि सामूहिक रूप से मैंने बहुत कुछ सीखा। बहुत बढ़िया जवाब! धन्यवाद। – yoshyosh

+0

@ डेविड: ठीक है, संकेत के लिए धन्यवाद, मुझे यह नहीं पता था - लेकिन मुझे आशा है कि आप मुझसे सहमत होंगे कि अंत टैग होने का अधिक सुंदर समाधान है। (भी, हम नहीं जानते कि वह xhtml लिखना चाहता था - इस मामले में, बंद टैग वैकल्पिक नहीं हैं) – oezi

2

नहीं कर रहे हैं तो आप उन्हें एक <p> अंदर डाल या एक <div>

<p style="text-align:center"> 
    <a href="http//www.google.com">Search</a> 
    <a href="Contact Us">Contact Us</a> 
</p> 

नमूना होगा: http://jsfiddle.net/X8HM4/1/

2

< पी > दिखाएगा एक नई लाइन पर। एक ही < पी > टैग में अपने लिंक के सभी लपेटकर का प्रयास करें:

<p style="text-align:center;"><a href="http//www.google.com">Search</a><a href="Contact Us">Contact Us</a></p> 
+0

मैंने इस विधि की कोशिश की, इसके साथ समस्या यह है कि खोज के दौरान कोई अंतर नहीं है और जब मैं ऐसा करता हूं तो हमसे संपर्क करें। :( – yoshyosh

+0

आपको स्पेसिंग जोड़ने की आवश्यकता होगी। मुझे लगता है कि ओज़ी इस पर क्रिंग करेगा, लेकिन यदि कुछ और नहीं है, तो आप प्रत्येक 'ए' तत्व के बीच   (गैर-ब्रेकिंग स्पेस) डाल सकते हैं। आप एक शैली = " मार्जिन-दाएं: 4 पीएक्स; "प्रत्येक 'ए' तत्व के लिए। कई तरीके हैं। लेकिन आपको इसे कम करने के लिए कम से कम एक को लागू करना होगा :) – charliegriefer

+0

मैं भी इसमें क्रिंग करूंगा। यदि स्टाइल खत्म हो जाने पर सामग्री समझ में नहीं आती है, तो मार्कअप गलत है। – Quentin

4

आप लिंक की एक सूची है, इसलिए आप उन्हें एक सूची के रूप में अंकन किया जाना चाहिए (और पैराग्राफ के रूप में नहीं)।

लिस्टामैटिक में a bunch of examples of how you can style lists of links है, जिसमें प्रत्येक लिंक केंद्रित होने के साथ लंबवत सूचियां हैं (जो आप बाद में दिखाई देते हैं)। इसमें a tutorial which explains the principles भी है।

स्टाइल का वह हिस्सा अनिवार्य रूप से "तत्व text-align: center को उस तत्व पर सेट करता है जो एक लिंक के रूप में प्रदर्शित होता है जिसमें लिंक टेक्स्ट होता है" (जो एंकर स्वयं हो सकता है (यदि आप इसे ब्लॉक के रूप में प्रदर्शित करते हैं) या सूची आइटम यह युक्त।

-2

एक ul तत्व के साथ एक nav तत्व करके देखें। मेरा एक main ऊपर है, लेकिन मुझे नहीं लगता कि आप इसे की आवश्यकता है।

<main> 
<nav> 
<ul><li><a href="http//www.google.com">search</a> 
<li><a href="http//www.google.com">search</a> 
<li><a href="http//www.google.com">search</a> 

कोड कुछ इस तरह है।
जब भी मैंने मुझे रखा n कोड यह सही काम नहीं करेगा, इसलिए आपको खाली,
भरने की आवश्यकता है, फिर इसे केंद्र दें।

main 
nav 
ul> li> a>: href="link of choice":name of link:/a> 
+0

यह सवाल का जवाब कैसे देता है? – cpburnz

+0

@chris: मैंने आपके लिए कोड स्वरूपित किया है। भविष्य में, कृपया अपने कोड ब्लॉक की प्रत्येक पंक्ति (और इनलाइन कोड के लिए बैकटिक्स) पर एक चार-स्पेस उपसर्ग का उपयोग करें। विवरण के लिए [संशोधन इतिहास] (http://stackoverflow.com/posts/32975289/revisions) देखें। मुझे यकीन नहीं है कि आपके उत्तर का अंतिम भाग क्या मतलब है। मैं _guessing_ हूं कि यह गलत रूप से स्वरूपित कोड का वर्णन करने के लिए है।यदि ऐसा है, तो कृपया अपने उत्तर को संपादित करें और उन बिट्स को हटा दें जिनकी अब आवश्यकता नहीं है। –

-1

एक समाधान इस तरह, <center> अंदर उन्हें डाल करने के लिए है:

<center> 
<a href="http//www.google.com">Search</a> 
<a href="Contact Us">Contact Us</a> 
</center> 

मैं भी आप के लिए एक jsfiddle बना लिया है: https://jsfiddle.net/9acgLf8e/