कार्यक्षेत्र एक छवि और एक बहु पाठ

Question

मैं एक छवि संरेखित करने के लिए कोशिश कर रहा है और खड़ी एक पाठ संरेखित। यदि टेक्स्ट व्यूपोर्ट-चौड़ाई से बड़ा है, तो यह अब और काम नहीं करता है। मुझे लगता है कि इस प्रदर्शन की स्थापना के कारण होता है: इनलाइन-ब्लॉक:

<a href="#"> 
    <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" /> 
    <span style="display: inline-block; vertical-align: middle;"> 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore 
    </span> 
</a> 

परिणाम:

 
+---------------------------------------------------------------------+ -- Viewport 
|                  |                
| +-----+                | 
| |IMAGE| text text text text text text text text text text text text | 
| +-----+                |               
|                  | 
+---------------------------------------------------------------------+ 

+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
| text text text text  | 
+-------------------------+ 

अगर मैं तत्वों फ्लोट करने के लिए प्रयास करते हैं, छवि हमेशा सबसे ऊपर होगा, लेकिन vertical- नहीं

<a href="#"> 
     <img style="display: block; vertical-align: middle; margin-right: 8px; float: left;" src="/images/arrow_black.png" /> 
     <span style="display: block; overflow: auto;"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
     </span> 
    </a> 

परिणाम:

 
+-------------------------+ -- Viewport 
| +-----+ Text text text | 
| |IMAGE| text text text | 
| +-----+ text text text | 
|   text text text | 
|   text text text | 
|   text text text | 
+-------------------------+ 

पाठ के बीच में aligend

मैंने एचटीएमएल-टेबल या सीएसएस-टेबल (डिस्प्ले: टेबल और डिस्प्ले: टेबल-सेल) का उपयोग करके इस समस्या के लिए कई समाधान देखे हैं, लेकिन यह एक विकल्प नहीं है, क्योंकि इसे सभी प्रकार के ब्राउज़रों (डेस्कटॉप) के साथ काम करना चाहिए और मोबाइल)।

उस पर, मुझे कोई आकार नहीं पता है। न तो छवि और न ही पाठ के। इसलिए मैं किसी भी "मार्जिन- या पैडिंग-सॉल्यूशन" का उपयोग नहीं कर सकता।

संपादित: मैंने बनाई गई एक demo-fiddle (एक NGLN पर आधारित है, पैदा कर दी है Btw:! धन्यवाद कि के लिए) पता चलता है कि परिणाम मैं की तलाश में। लेकिन मैं डिस्प्ले का उपयोग किए बिना इसे संग्रहीत करने का प्रयास करता हूं: टेबल-सेल ... कोई विचार?

Answer 1

यदि आप छवि चौड़ाई और टेक्स्ट चौड़ाई के बीच अनुपात का आकलन कर सकते हैं तो मैं टेक्स्ट अवधि पर प्रतिशत चौड़ाई निर्धारित करने की अनुशंसा करता हूं।

Answer 2

आपने कहा कि आप आकार जानने के कारण मार्जिन/पैडिंग उत्तरों का उपयोग नहीं कर सकते हैं। हालांकि, छवि को आधा रास्ते नीचे रखने के लिए प्रतिशत का उपयोग क्यों न करें, फिर सबकुछ divs में विभाजित करें?

<div id="viewport"> 
    <div id="image"> 
     <img src="http://source..." /> 
    </div> 
    <div id="text"> 
     Whatever 
    </div> 
</div> 

और फिर अपने सीएसएस में, ऐसा करते हैं:

#viewport { 
    width:800px; 
    height:500px; 
    border:1px solid #FFF; 
}  

#image { 
    width: 400px; 
    float:left; 
    height:100%; 
    text-align: center; 
} 

img { 
    margin-top:50%; 
} 

#text { 
    width:300px; 
    float:left; 
} 

जाहिर है सभी चौड़ाई और ऊंचाई प्रतिशत हो सकता है या फिर भी आप उन्हें संभालने के लिए कामना करता हूं। हालांकि, यह प्रस्तुत करना चाहिए कि आप इसे कैसे चाहते हैं। आशा है कि मैं आपके प्रश्न को सही ढंग से समझ रहा हूं।

Answer 3

क्या आपका मतलब this demo fiddle जैसा कुछ है?

HTML:

<div id="viewport"> 
    <a href="#"> 
     <img src="images/arrow_black.png" alt="" /> 
     <span>Lorem ipsum dolor...</span> 
    </a> 
</div> 

सीएसएस:

#viewport { 
    background: #bbb; 
    width: 350px; 
    padding: 5px; 
    position: relative; 
} 
#viewport img { 
    position: absolute; 
    top: 50%; 
    margin-top: -30px; /* = image height div 2 */ 
} 
#viewport span { 
    margin-left: 68px; /* = image width + 8 */ 
    display: block;  
} 

Answer 4

यह एक तरीका है कि मैं पर गर्व नहीं कर रहा हूँ, लेकिन यह एक ही रास्ता मैं js या flexbox के बिना इस संग्रह करने के लिए पता है।

#viewport { 
 
    width: 350px; 
 
    padding: 5px; 
 
    position: relative; 
 
} 
 

 
#viewport a { 
 
    background: #bbb; 
 
    display: inline-block; 
 
} 
 

 
#viewport img { 
 
    display: block; 
 
} 
 

 
#viewport i, 
 
#viewport span { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
/* Using padding to add gutter 
 
between the image and the text*/ 
 
#viewport span { 
 
    padding-left: 15px; 
 
}

<div id="viewport"> 
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
    
 
    <a href="#"> 
 
     <i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i> 
 
     <span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span> 
 
    </a> 
 
</div>

कोई फर्क नहीं पड़ता जो तत्व अधिक ऊंचाई है इस तरह, पाठ और छवि हमेशा बीच में गठबंधन की जाएगी।