Question

我知道这是一个常见的问题，但我确定我只是遗漏了一些明显的东西。我试图让fontawesome图标在父div的中间垂直对齐，但它只是保持坐在顶部。

＆＃13;

function spinner() {
	$("#spinner").show();
}

＆＃13;

#spinner {
    display: none;
    height: 100%;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 99999;
}
	
#spinner div {
    color: yellow;
    border: 10px solid red;
    height: 100%;
    vertical-align: middle;
}

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
  </head>
  <body>
    
    <div id="spinner">
	    <div>
		    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
	    </div>
    </div>
    
    <button type="button" onclick="spinner()">
        Spinner
    </button>
    
  </body>
</html>

＆＃13;

Answer 1

我会推荐你here，它解释了1）你的常见问题和2）如何实际垂直对齐。总结：垂直对齐不像你想象的那样工作，你必须使用其他方法（在线很容易找到）来垂直对齐。

您还可以考虑使用已在SO上发布的弹性框或黑客。

Answer 2

我知道有两种常见的技术。

使用下面的表格方法。
有时让您的元素显示为表格会在响应式网站中造成麻烦，在这种情况下，您可以使用transform：translate技术。
#spinner div {
位置：相对; }
#spinner .fa-spinner {
位置：绝对; 最高：50％; transform：translateY（-50％）; }

＆＃13;

    function spinner() {
    	$("#spinner").show();
    }

＆＃13;

 #spinner {
        display: none;
        height: 100%;
        left: 0px;
        position: absolute;
        text-align: center;
        top: 0px;
        width: 100%;
        z-index: 99999;
    }
    	
    #spinner div {
        color: yellow;
        border: 10px solid red;
        height: 100%;
        vertical-align: middle;
        display: table; 
        width: 100%; 
    }
#spinner .fa-spinner{
  display: table-cell; 
  vertical-align: middle;
  }

＆＃13;

 <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
      </head>
      <body>
        
        <div id="spinner">
    	    <div>
    		    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    	    </div>
        </div>
        
        <button type="button" onclick="spinner()">
            Spinner
        </button>
        
      </body>
    </html>

＆＃13;

Answer 3

由于使用display:none隐藏div，因此需要将属性更改为display:table，然后子div应具有属性display:table-cell。

function spinner() {
    $("#spinner").css("display", "table");
	$("#spinner").show();
}

#spinner {
    display: none;
    height: 100%;
    left: 0px;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 100%;
    z-index: 99999;
}
	
#spinner div {
    border: 10px solid red;
    color: yellow;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
  </head>
  <body>
    
    <div id="spinner">
	    <div>
		    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
	    </div>
    </div>
    
    <button type="button" onclick="spinner()">
        Spinner
    </button>
    
  </body>
</html>

垂直对齐div的内容

3 个答案: