उसी पंक्ति पर केंद्रों को केंद्रित और पोजिशनिंग

Question

मेरे पास एक-दूसरे के पीछे तत्वों को केंद्रित करने और स्थिति रखने के बारे में एक प्रश्न है। मेरे पास बाईं ओर पाठ का एक ब्लॉक है और इस मामले में केवल एक शब्द है, जो केंद्रित होना चाहिए और ई-मेल के समान लाइन पर होना चाहिए।

nav { 
 
\t text-align: center; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    hi(at)mail.com 
 
</address> 
 

 
<nav> 
 
    <a href="#">about</a> 
 
</nav>

मैं बाईं ओर का पता फ्लोट करने की कोशिश की, लेकिन तब एनएवी अब केंद्र में नहीं है। कोई विचार यह कैसे पूरा करने के लिए? यह आसान होना है, लेकिन मुझे नहीं पता कि कैसे।

संपादित

एनएवी पूरे व्यूपोर्ट के लिए केंद्रित होना चाहिए, मेरे वर्तमान जवाब निरपेक्ष स्थिति के लिए एनएवी और सेट छोड़ दिया और सही करने के लिए 0. लेकिन मैं नहीं जानता कि अगर यह होगा किया जाएगा ऐसा करने का सबसे अच्छा तरीका है।

यह कैसा दिखना चाहिए:

Answer 1

मैं जानता हूँ कि अगर यह सबसे अच्छा तरीका है, लेकिन यह क्या आप

nav { 
 
left:50%; 
 
\t text-align: center; 
 
} 
 
address{ 
 
    float:left; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    hi(at)mail.com 
 
</address> 
 

 
<nav> 
 
<br/> 
 
    <a href="#">about</a> 
 
</nav>

Answer 2

क्या करना चाहते हैं की तरह लग रहा न display:table-cell का उपयोग करने पर विचार करें। इस तरह हम कंटेनर तत्व के नीचे सामग्री को लंबवत रूप से संरेखित कर सकते हैं।

HTML:

<div class="container"> 
    <address> 
    <a href="#">Some text</a> 
    <br> 
    hi(at)mail.com 
    </address> 
    <nav> 
    <a href="#">about</a> 
    </nav> 
</div> 

सीएसएस:

.container{ 
    display:table; 
    width:100%; 
} 
address, nav{ 
    display:table-cell; 
    vertical-align:bottom; 
    width:50%; 
} 

देखें यहाँ codepen (टेबल सेल वस्तुओं पर 50% चौड़ाई शामिल करने के लिए संपादित): http://codepen.io/eoghanTadhg/pen/NNYgYg

Answer 3

मैं तुम्हें दिखाना चाहता था यह समाधान क्योंकि यह कुछ विचारों को जोड़ता है जिन्हें कभी-कभी समस्याग्रस्त माना जाता है। यहां मैं इस तथ्य का उपयोग करता हूं कि डिफ़ॉल्ट रूप से इनलाइन-ब्लॉक तत्वों द्वारा उनकी सामग्री की अंतिम पंक्ति द्वारा लंबवत संरेखित किया जाता है। यही वही है जो आपको चाहिए। साथ ही, यह ब्लॉक के भीतर क्षैतिज रूप से एनएवी सामग्री को केंद्रित करने के लिए, शून्य चौड़ाई वाले ब्लॉक के दृश्य ओवरफ्लो का उपयोग करता है।

nav { 
 
    text-align: center; 
 
    display:inline-block; 
 
    width:100%; 
 
    margin-left:-0.25em; 
 
} 
 
address { 
 
    display:inline-block; 
 
    width:0; 
 
} 
 
address > * { 
 
    white-space: nowrap; 
 
}

<address> 
 
    <a href="#">Some text</a> 
 
    <br> 
 
    <span>hi(at)mail.com</span> 
 
</address> 
 

 
<nav> 
 
    <a href="#">about</a> 
 
</nav>