दाईं ओर एक इनलाइन-ब्लॉक तत्व को कैसे संरेखित करें?

Question

जैसा कि आप निम्न में देख सकते हैं: http://jsfiddle.net/EvWc4/3/, मैं वर्तमान में दूसरे लिंक (लिंक-alt) को अपने मूल (पी) के दाहिने तरफ संरेखित करने का एक तरीका खोज रहा हूं।

क्यों नाव या स्थिति का उपयोग नहीं: पूर्ण आप अच्छी तरह से मुख्य कारण यह है कि मैं इस तथ्य की तरह है कि लिंक 'प्रदर्शन (इनलाइन-ब्लॉक) संपत्ति उन्हें verticaly में एक स्वाभाविक रूप से एक तरह से जिस तरह से गठबंधन करने की अनुमति दे, कहूँगा ।

फ्लोट या स्थिति का उपयोग करके: पूर्ण; मुझे लिंक करने के लिए लंबवत रूप से गठबंधन करने के लिए कुछ अतिरिक्त मार्जिन-टॉप या शीर्ष मान की गणना करने और मजबूर करने के लिए मजबूर होना होगा।

यहाँ कोड है, लेकिन बेहतर फिडल http://jsfiddle.net/EvWc4/3/ देखें:

<p> 
     <a href="#" class="link">link</a> 
     <a href="#" class="link link-alt">link alt</a> 
    </p> 

    p { 
     padding: 20px; 
     background: #eee; 
    } 
    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 
    .link-alt { padding: 20px; } 

Answer 1

CSS3 के साथ ऐसा करने के लिए कर सकता है आप फ्लेक्स बॉक्स मॉडल का उपयोग कर सकते

HTML:

<div class="content"> 
    <div class="box box1"><a>Link 1</a></div> 
    <div class="box box2"></div> 
    <div class="box box3"><a>Link 2</a></div> 
</div> 

सीएसएस:

.content { 
    display: box; 
    box-orient: horizontal; 
    box-pack: center; 
    box-align: center; 
} 
.box2 { 
    box-flex: 1; 
} 

(जरूरत विक्रेता उपसर्गों)

http://jsfiddle.net/EvWc4/18/

Answer 2

विशेषता float तत्व के लम्बवत स्थिति से कोई संबंध नहीं।

p{padding:20px;background:#eee;overflow:auto;} 
.link-alt{padding:20px; float:right} 

जो आप खोज रहे हैं उसे पूरा करना चाहिए। माता-पिता के अतिप्रवाह को इसके अलावा कुछ डिफ़ॉल्ट (दृश्यमान) सेट करना सामान्य तत्वों जैसे फ़्लोटिंग बच्चों के इलाज के लिए मजबूर करेगा।

Reference article

Answer 3

आप positionabsolute करने के लिए सेट और प्रयोग right: 0

.wrapper { 
    position: relative; 
} 
.right { 
    position: absolute; 
    right: 0; 
} 

http://jsfiddle.net/EvWc4/13/

Answer 4

मैं Chrome के बाहर इस परीक्षण नहीं किया है, इसलिए यह IE के लिए चूसना सकता है।

यह सरल (और सीमित) समाधान माता पिता पर गठबंधन बच्चों पर text-align: right और width: 50%, और white-space: nowrap का लाभ उठाता है वांछित परिणाम प्राप्त करने।

उदाहरण: http://jsfiddle.net/erikjung/ejcJZ/

.vertically-centered-module { 
    white-space: nowrap; 
} 

.vertically-centered-module > * { 
    display: inline-block; 
    vertical-align: middle; 
    width: 50%; 
} 

.vertically-centered-module > :last-child { 
    text-align: right; 
} 

Answer 5

मैं Pethas उदाहरण नवीनीकृत किया है, तो यह शुद्ध सीएसएस 2 में किया जा सकता। यह आईई 7 में काम नहीं करता है, क्योंकि यह display: table-cell; का समर्थन नहीं करता है जिसका मैं उपयोग करता हूं।

http://jsfiddle.net/EvWc4/133/

Answer 6

CSS3 के फ्लेक्स और ग्रिड आइटम इन मुद्दों से निपटने के लिए की अपेक्षा की जाती है, लेकिन मानक समर्थन 2013

असली दुनिया के लिए वापस के रूप में असमान बनी हुई है। मुझे नहीं लगता कि यह पूरी तरह से सीएसएस 2 में करना संभव है।पिक्सेल हैक्स के बिना 1 (आईई 8 +)। बात यह है कि पाठ संरेखण मूल तत्व द्वारा नियंत्रित होता है, और चूंकि दोनों एंकर अपने माता-पिता को साझा करते हैं, इसलिए वे दोनों बाएं या दाएं को संरेखित करते हैं। और औचित्य अंतिम पंक्ति पर काम नहीं करता है।

1) एक और इनलाइन कि लाइन लपेट, और उसके बाद खाली पंक्ति छिपाने की कोशिश करने के लिए गारंटी है जोड़ें:

आप एक छोटे से अतिरिक्त एचटीएमएल ग्रस्त कर सकते हैं, वहाँ दो दृष्टिकोण हैं। यह आपको पाठ-संरेखण का उपयोग माता-पिता पर उचित ठहराने की अनुमति देता है।

<p> 
    <a href="#" class="link">link</a> 
    <a href="#" class="link link-alt">link alt</a> 
    <span class="boom"></span> 
</p> 

<style type="text/css"> 
    p { 
     padding: 20px; 
     background: #eee; 
     text-align: justify 
    } 

    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 

    .link-alt { 
     padding: 20px; 
    } 

    span { 
     display: inline-block; 
     height: 0; 
     width: 100% 
    } 
</style> 

पेशेवर: इनलाइन ब्लॉक की किसी भी संख्या पर काम करता है, न केवल दो। केवल थोड़ा अतिरिक्त HTML आवश्यक है।

विपक्ष: टेक्स्ट की आखिरी (खाली) रेखा को छिपाने के लिए अतिरिक्त प्रयास करता है (इसके अंदर इनलाइन ब्लॉक को 0 ऊंचाई पर सेट करने से आपकी मदद नहीं होगी), और आपको मार्जिन या कुछ के साथ बेवकूफ़ बनाना होगा यह वास्तव में काम करने के लिए। आगे की चर्चा: How do I *really* justify a horizontal menu in HTML+CSS?

2) अपने एंकर टैग के शीर्ष पर इनलाइन ब्लॉक की एक और परत जोड़ें और उन्हें 50% आकार दें। फिर आप अनुरोध किए गए अंतिम लेआउट को प्राप्त करने के लिए अलग-अलग टेक्स्ट-एलाइन को लागू कर सकते हैं। यह महत्वपूर्ण है कि दो इनलाइन ब्लॉक के बीच 50% तक के बीच कोई व्हाइटस्पेस की अनुमति नहीं है, या आप लाइन को लपेट लेंगे।

<p> 
    <span class="left"> 
     <a href="#" class="link">link</a> 
    </span><span class="right"> 
     <a href="#" class="link link-alt">link alt</a> 
    </span> 
</p> 

<style type="text/css"> 
    p { 
     padding: 20px; 
     background: #eee; 
    } 

    .link { 
     display: inline-block; 
     padding: 10px; 
     background: #ddd; 
    } 

    .link-alt { 
     padding: 20px; 
    } 

    span { 
     display: inline-block; 
     width: 50% 
    } 

    .left { 
     text-align: left 
    } 

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

पेशेवर: बाहरी बॉक्स मॉडल को प्रदूषित किए बिना आपके द्वारा अनुरोध किए गए सटीक लेआउट का उत्पादन करता है।

विपक्ष: केवल दो इनलाइन ब्लॉक के लिए काम करता है (आप इसे विस्तारित करने का प्रयास कर सकते हैं, लेकिन यह वास्तव में जटिल हो जाता है)। कोई अतिरिक्त सफेद जगह नहीं होने पर निर्भर करता है, जो आपके अच्छी तरह से स्वरूपित मार्कअप को खतरे में डाल सकता है।

Answer 7

मेरा मानना ​​है कि पूरा करता है आप जो खोज रहे हैं:

.link-alt { 
    position: absolute; 
    right: 0; top: 0; bottom: 0; 
    margin: auto; 
    max-height: 1em; 
} 

आप position: absolute और right: 0 सही संरेखण प्राप्त करने के लिए उपयोग कर सकते हैं। लंबवत केंद्र रखने के लिए, आप top: 0; bottom: 0; margin: auto; का उपयोग कर सकते हैं। बेशक, आपको तत्व पर ऊंचाई निर्धारित करने की भी आवश्यकता होगी, या यह अपने माता-पिता की पूरी ऊंचाई तक फैल जाएगी।

यहाँ एक jfiddle है: http://jsfiddle.net/pHppA/