ฉันมี div (#wrapper) ที่มี 2 div ที่ยืนเคียงข้างกัน

ฉันต้องการให้ div ด้านขวาอยู่ในแนวตั้ง ฉันลองจัดแนวตั้ง: ตรงกลางบนกระดาษห่อหลัก แต่ใช้งานไม่ได้ มันทำให้ฉันแทบคลั่ง!

หวังว่าจะมีคนช่วยได้

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>

CSS:

#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;}

คุณไม่มีโชคกับองค์ประกอบลอย พวกเขาไม่ปฏิบัติตามแนวตั้ง

คุณต้องการ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

CSS

#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;
}
  

คุณสามารถทำได้อย่างง่ายดายด้วยตารางแสดงผลและเซลล์ตารางที่แสดง

#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;
}

แก้ไข:ยุ่งอย่างรวดเร็วบน CSS Desk สำหรับคุณ - 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;
}

ฉันรู้ว่านี่เป็นคำถามโบราณ แต่ฉันคิดว่าการโพสต์วิธีแก้ปัญหาการจัดตำแหน่งแนวตั้งแบบลอยจะมีประโยชน์

ด้วยการสร้าง Wrapper รอบ ๆ เนื้อหาที่คุณต้องการให้ลอยจากนั้นคุณสามารถใช้ :: after หรือ :: before pseudo selectors เพื่อจัดแนวเนื้อหาของคุณในแนวตั้งภายใน Wrapper คุณสามารถปรับขนาดของเนื้อหาทั้งหมดที่คุณต้องการได้โดยไม่ส่งผลต่อการจัดแนว จับเพียงว่าเสื้อคลุมต้องกรอกความสูง 100% ของของภาชนะ

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

HTML

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

CSS

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;
}

วิธีการแก้ปัญหาที่เป็นไปได้คือการทำให้เสื้อคลุมdiv flexที่มีรายการจัดตำแหน่งบนcenterตามที่ระบุโดยhttps://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/

ฉันพยายามอย่างเต็มที่ที่จะหลีกเลี่ยงการใช้ลูกลอย ... แต่ - เมื่อจำเป็นฉันจัดแนวตั้งตรงกลางโดยใช้เส้นต่อไปนี้:

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

ข้อเสียเพียงอย่างเดียวของการปรับเปลี่ยนของฉันคือคุณมีความสูงของชุด div ... ฉันไม่รู้ว่านั่นเป็นปัญหาสำหรับคุณหรือไม่

http://cssdesk.com/kyPhC