在中心和中間對齊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/）？順便說一句，如果你將'.InnerContainer'設置爲'display：table-cell'，我認爲你需要將父級（'.Container'）設置爲'display：table'。 –

這裏是jsfiddle – EternallyCurious

你應該到.Container和display:inline-block添加display:table-cell到.InnerContainer（因爲div的傾向，除非指定寬度佔用所有可用的水平空間）。

而不是加text-align:center; vertical-align:middle;到.Container。

像這樣：http://jsfiddle.net/fd5rV/

來源

2014-02-08 17:51:47

在中心和中間對齊div中的跨度

回答

相關問題