居中對齊<p>在 div 內垂直和水平

Question

我正在嘗試在<div>內垂直和水平居中對齊<p> <div> 。 我正在創建一個加載 div，以便在上傳大文件時使用。

這是我的 CSS 樣式：

#divProcessing {
     position:absolute; /* or fixed */
     background-color:rgba(0,0,0,0.6); /* to your preference */
     width:100%;
     height:100%;
     top:0; left:0; bottom:0; right:0; /* not always necessary */
     text-align:center; 
     vertical-align:middle;
};

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
};

這是 HTML：

<div id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

我試過text-align:center; 和vertical-align:middle; 但它仍然顯示在頁面頂部。

關於如何修復它的任何想法？

JSFiddle： https ://jsfiddle.net/VansFannel/nkb1zupr/

我已經嘗試過這些答案： https : //stackoverflow.com/a/19599207/68571、https : //stackoverflow.com/a/20267769/68571和https://stackoverflow.com/a/15121442/68571沒有成功。

Answer 1

試試這個。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
    .loading {
        position:absolute; /* or fixed */
        background-color:rgba(0,0,0,0.6); /* to your preference */
        width:100%;
        height:100%;
        top:0; left:0; bottom:0; right:0; /* not always necessary */
        text-align:center; 
        display: table;
    }

    .loading p {
        color:#fff;
        font-size:25px;
        text-align:center;
        display: table-cell;
        vertical-align: middle;
    }
</style>
</head>

<body>
<div class="loading" id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>
</body>
</html>

Answer 2

https://jsfiddle.net/nkb1zupr/9/

試試這個。 你必須為你的 div 指定一個高度。 我現在把它設置為 10em。

HTML

<div id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

CSS

#divProcessing {
     position: relative;
     background-color:rgba(0,0,0,0.6); /* to your preference */
       height: 10em; /* specify a height */
}

#divProcessing p {
   margin: 0;
   position: absolute;               
   top: 50%;                         
   transform: translate(0, -50%);
   margin-left: 33%; 
   margin-right: 33%;
}

Answer 3

添加

#divProcessing p{position:relative; top:50%; text-align:center; margin-top:-15px}

編輯位置您的代碼

#divProcessing {
     **position:fixed;** /* or fixed */
     background-color:rgba(0,0,0,0.6); /* to your preference */
     width:100%;
     height:100%;
     padding-top:50%;
     margin-top:-50px;
     top:0; left:0; bottom:0; right:0; /* not always necessary */
     text-align:center; 
     vertical-align:middle;
};

https://jsfiddle.net/v9L9cb81/1/

Answer 4

嘗試將一個類放入 div 並在 css 文件中編輯其中包含的每個元素。 在你的 html 中嘗試這樣：

<div class="loading" id="divProcessing">
    <p>Cargando c&oacute;digos, por favor espere . . . <img src="~/Content/images/ripple.gif"></p>
</div>

在您的 .css 中，您將編輯您的 < p > 樣式：

.loading {
    position:absolute; /* or fixed */
    background-color:rgba(0,0,0,0.6); /* to your preference */
    width:100%;
    height:100%;
    top:0; left:0; bottom:0; right:0; /* not always necessary */
    text-align:center; 
    vertical-align:middle;
}

.loading p {
    color:#fff;
    font-size:25px;
    text-align:center;
    /*You can also try with margin giving a right margin if you prefer*/
}

居中對齊<p>在 div 內垂直和水平

問題描述

4 個解決方案

解決方案1
1 已采納 2016-04-04 07:52:29

解決方案2
0 2016-04-04 07:55:19

解決方案3
0 2016-04-04 08:41:00

解決方案4
-1 2016-04-04 07:43:16

居中對齊<p>在 div 內垂直和水平

問題描述

4 個解決方案

解決方案1 1 已采納 2016-04-04 07:52:29

解決方案2 0 2016-04-04 07:55:19

解決方案3 0 2016-04-04 08:41:00

解決方案4 -1 2016-04-04 07:43:16

解決方案1
1 已采納 2016-04-04 07:52:29

解決方案2
0 2016-04-04 07:55:19

解決方案3
0 2016-04-04 08:41:00

解決方案4
-1 2016-04-04 07:43:16