가운데와 중간에있는 div 내부의 스팬 정렬

내부에 div가 있고 그 안에는 여러 스팬이 있습니다. div가 상당히 크고 스팬이 채워지지 않습니다. 범위가 정렬되도록 결과 텍스트가 div 영역의 중심에있는 것처럼 보입니다 (수직 및 수평 모두). 나는 그것을 올바르게 설정해야 할 때마다 픽셀 수를 계산하고 싶지 않습니다. 중앙에서 수직으로 정렬 할 수 있지만 수평으로 정렬 할 수는 없습니다. (div의 너비가 지정하지 않는 한 모든 가능한 수평 공간을 점유하는 경향이 있기 때문에)가운데와 중간에있는 div 내부의 스팬 정렬

<div class="Container"> 
    <div class="InnerContainer"> 
     <b><span class="large">Hi</span><span class="normal">How're you doing</span> 
     <br/> 
     <span style="font-family: Arial; font-size: medium">Answer Here</span> 
    </div> 
</div> 

.Container { 
      /*Set surroundings of the div*/ 
      padding: 0; 

      /* Set size of the div */ 
      width: 400px; 
      height: 350px; 

      /* Set position of the div */ 
      position: relative; 
      margin: 0 auto; 
      margin-left: -200px; 
      margin-top: -175px; 
      left: 50%; 
      top: 50%; 

      align-content: center; 
      vertical-align: middle; 
     } 

     .InnerContainer{ 
      /*Set surroundings of the div*/ 
      padding: 0; 

      /* Set size of the div */ 
      width: 400px; 
      height: 350px; 

      /* Set position of the div */ 
      position: relative; 
      margin: 0 auto; 
      margin-left: -250px; 
      margin-top: -175px; 
      left: 50%; 
      top: 50%; 

      /*align-content: center;*/ 
      vertical-align: middle; 

      display: table-cell; 
     }

출처

2014-02-08 EternallyCurious

당신은 [JSFiddle] (http://jsfiddle.net/)을 제공 할 수 http://jsfiddle.net/fd5rV/? BTW,'.InnerContainer'를'display : table-cell'으로 설정한다면 부모 ('.Container')를'display : table'으로 설정해야한다고 생각합니다. –

다음은 jsfiddle입니다. – EternallyCurious

당신은 .InnerContainer에 .Container 및 display:inline-block에 display:table-cell을 추가해야합니다.

그리고 text-align:center; vertical-align:middle;부터 .Container까지를 더하십시오. 이처럼

는 :

출처

2014-02-08 17:51:47

가운데와 중간에있는 div 내부의 스팬 정렬

답변

관련 문제