CSS 수직 정렬 플로팅 div

CSS 수직 정렬 플로팅 div

---

나란히 서있는 2 개의 div가 포함 된 div (#wrapper)가 있습니다.

right-div를 세로로 정렬하고 싶습니다. 내 주 래퍼에서 vertical-align : middle을 시도했지만 작동하지 않습니다. 그것은 나를 미치게 만든다!

누군가가 도울 수 있기를 바랍니다.

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

See a demonstration here: 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;
}

---

You can do this quite easily with display table and display table-cell.

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

EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg

ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - 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;
}

---

I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.

By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.

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

---

A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.

---

I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:

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

---

The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.

http://cssdesk.com/kyPhC

참고URL : https://stackoverflow.com/questions/9430929/css-vertically-align-floating-divs