CSS लंबवत फ़्लोटिंग divs को संरेखित करता है

Question 1

मेरे पास एक div (#wrapper) है जिसमें 2 divs खड़े हैं।

मैं चाहूंगा कि दायां-दिव्य लंबवत संरेखित हो। मैंने ऊर्ध्वाधर-संरेखित करने की कोशिश की: मेरे मुख्य आवरण पर मध्य लेकिन यह काम नहीं कर रहा है। यह मुझे पागल कर रहा है!

आशा है कि कोई मदद कर सकता है।

http://cssdesk.com/LWFhW

HTML:

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>  
  <div id="right-div">
    Here some text...
  </div>
</div>

सीएसएस:

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

Question 2

आपको तैरते हुए तत्वों के साथ कोई भाग्य नहीं है। वे ऊर्ध्वाधर-संरेखित नहीं करते हैं,

आपको इसकी आवश्यकता है display:inline-block:

http://cssdesk.com/2VMg8

सावधान

सावधान रहें display: inline-block;क्योंकि यह तत्वों के बीच के सफेद-अंतरिक्ष को वास्तविक सफेद-अंतरिक्ष के रूप में व्याख्या करता है। यह इसे पसंद display: blockनहीं करता है।

मैं यह सलाह देता हूं:

(शून्य) font-sizeवाले तत्व को सेट करें 0और font-sizeतत्वों जैसे अपने आवश्यक मान को रीसेट करें

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

यहां एक प्रदर्शन देखें: http://codepen.io/HerrSerker/pen/mslay

सीएसएस

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;  
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

Question 3

आप इसे डिस्प्ले टेबल और डिस्प्ले टेबल-सेल के साथ आसानी से कर सकते हैं।

#wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

संपादित करें: वास्तव में आपके लिए सीएसएस डेस्क पर जल्दी से गड़बड़ हो गई है - http://cssdesk.com/RXghg

अन्य संस्करण : Flexbox का उपयोग करें। यह काम करेगा लेकिन यह बहुत पुराना है - http://www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

Question 4

मुझे लगता है कि यह एक प्राचीन प्रश्न है, लेकिन मुझे लगा कि फ्लोट वर्टिकल अलाइनमेंट इश्यू का समाधान पोस्ट करना उपयोगी होगा।

जिस सामग्री को आप तैरना चाहते हैं, उसके चारों ओर एक आवरण बनाकर, फिर आप छद्म चयनकर्ताओं को आवरण के भीतर अपनी सामग्री को लंबवत रूप से संरेखित करने से पहले :: बाद या :: का उपयोग कर सकते हैं। आप उस सामग्री के आकार को समायोजित कर सकते हैं जो आप बिना संरेखण को प्रभावित किए बिना चाहते हैं। एकमात्र कैच यह है कि रैपर को अपने कंटेनर की 100% ऊंचाई भरनी चाहिए ।

http://jsfiddle.net/jmdrury/J53SJ/

एचटीएमएल

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

सीएसएस

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Question 5

एक संभावित समाधान यह है कि https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ द्वारा निर्दिष्ट की गई div flexवस्तुओं के साथ रैपर बनाया जाए ।center

Question 6

मैं फ़्लोट्स का उपयोग करने से बचने के लिए अपनी पूरी कोशिश करता हूं ... लेकिन - जब ज़रूरत होती है, तो मैं निम्नलिखित पंक्तियों का उपयोग करके मध्य में लंबवत संरेखित करता हूं:

position: relative;
top: 50%;
transform: translateY(-50%);

Question 7

मेरे संशोधनों का एकमात्र पतन यह है कि आपके पास एक सेट div ऊंचाई है ... मुझे नहीं पता कि यह आपके लिए कोई समस्या है या नहीं।

http://cssdesk.com/kyPhC