div의 세로 중심 맞춤 양식

Question

<div class="parent"> 
    <div class="left-child"> 
     <img src="logo.jpg" alt="logo"> 
    </div> 
    <div class="right-child"> 
     <form action="#"> 
      <input type="text" value="search"> 
     </form> 
    </div> 
</div> 

로고 높이가 left-child 인 경우 수직 중심 right-child 양식으로 지정하고 싶습니다.

나를 도와 줄 사람이 있습니까?

추 신 : 사용자가 로고를 업로드합니다. 그래서 나는 로고 높이에 대해 잘 모른다.

Answer 1

것을 알고, 세로 방향으로 양식에 맞게 새 div. 나는 그것이 효과가 있기를 바란다. 이미지 너비는 고정되었지만 삭제할 수 있습니다. http://jsfiddle.net/BfZFJ/

귀하의 CSS :

.parent { 
    border: 1px dashed red; 
    display: table;   
    overflow: auto; 
    } 

    .left-child img { 
    width: 50px; 
    height: 50px; 
    } 

    .left-child { 
    border: 1px dashed blue;   
    } 

    .right-child { 
    border: 1px dashed green; 
    display: table-cell; 
    vertical-align: middle;       
    } 

    #your_form { 
    margin: 0 auto; 
    width: 200px; 
    } 

당신의 HTML :

<div class="parent"> 
    <div class="left-child"> 
     <img src="icons.jpg" alt="logo" /> 
    </div> 
    <div class="right-child"> 
     <div id="your_form"> 
      <form action="#"> 
       <input type="text" value="search" /> 
      </form>    
     </div>    
    </div> 
</div> 

포옹, 빈.

Answer 2

귀하의 div의이 display: inline-block을하는 경우가 수레 사용하고있는 경우가 있지만, vertical-align: middle를 사용할 수 있습니다 그러나

http://jsfiddle.net/mblase75/mugGY/

.left-child, 
.right-child { 
    display: inline-block; 
    vertical-align: middle; 
} 

을 inline-block은 내가 만든 not supported in older browsers like IE7

Answer 3

HTML :

<div class="parent"> 
    <div class="left-child"> 
     <div><img src="logo.jpg" alt="logo" /></div> 
    </div> 
    <div class="right-child"> 
     <form action="#"> 
      <input type="text" value="search1" /><br/> 
      <input type="text" value="search2" /><br/> 
      <input type="text" value="search3" /> 
     </form> 
    </div> 
</div> 

CSS :

.parent { 
    height: 400px; 
    width: 100%; 
    position: relative; 
} 

.left-child { 
    width: 50%; 
    height: 100%; 
    display: table; 
    position: absolute; 
} 
.left-child div { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.right-child { 
    width: 50%; 
    height: 100%; 
    display: table; 
    position: absolute; 
    left: 50%; 
} 

.right-child form { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

Credits

Fiddle

Answer 4

미래에 더 나은 대답은 플렉스 박스를 사용하게 될 모델

여기

• http://flexiejs.com/playground/
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes
• http://caniuse.com/flexbox는 (지금은) 현실 세계에서, 당신이 필요합니다 당신이 http://jsfiddle.net/BfZFJ/1/

  .parent { 
      /* Use flex box layout to layout its children */ 
      display: box; 
      /* Vertically center its children */ 
      box-align: center;  
  }  
  
  .right-child { 
      /* The child on the right will take up all the remaining horizontal space */ 
      box-flex: 1; 
  } 
  
  /* Don't have to do anything to left-child, it automatically takes up its natural size */ 
  

  참고 필요한 지원하는 CSS입니다 공급 업체 접두사를 사용하는 방법 :

  • 디스플레이 : -webkit 상자, 박스 -moz]
  • -webkit 박스 플렉스,
  • -webkit 박스 - 정렬 -moz 박스는 플렉스, -moz - 박스 - 정렬