-2

I'm trying to center align a <p> vertically and horizontally inside a <div>. I'm creating a loading div to be used when I upload big files.

Here are my CSS styles:

#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;
};

And this is the HTML:

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

I have tried with text-align:center; and vertical-align:middle; but it still shows it at the top of the page.

Any idea about how to fix it?

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

I have tried these answers: https://stackoverflow.com/a/19599207/68571, https://stackoverflow.com/a/20267769/68571 and https://stackoverflow.com/a/15121442/68571 without success.

Community
  • 1
  • 1
VansFannel
  • 41,682
  • 96
  • 329
  • 561
  • Thanks for downvoting and don't telling why. I have tried a lot of answers and none works with my problem. – VansFannel Apr 04 '16 at 07:25
  • instead of counting all elements you can easy type `*` and it will apply css rules for each html element. Also about your problem have you tried to fix it with `flex`? [***link***](https://css-tricks.com/centering-css-complete-guide/) – The Reason Apr 04 '16 at 07:27
  • 1
    Please, stop downvoting without telling why. – VansFannel Apr 04 '16 at 07:29
  • @VansFannel even in your fiddle it's working fine, `

    ` is centered inside the `

    `, so what is the problem, is it the vertical alignment?
     – benomatis Apr 04 '16 at 07:32
  • ...or do you want the image to center inside the paragraph...? – benomatis Apr 04 '16 at 07:35
  • 1
    @VansFannel I guess people are downvoting because your question is not exactly original, there are dozens of duplicates. If the solutions don't work, maybe you're doing something wrong or it's too specific. Anyway, you can try this: https://stackoverflow.com/questions/10008670/vertical-align-image-in-div/10009051#10009051 – Cthulhu Apr 04 '16 at 07:48

4 Answers4

1

Try this once.

<!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>
Kinjan Koradiya
  • 449
  • 1
  • 4
  • 17
0

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

Try this one. You have to specify a height to your div. I've set it to 10em now.

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%;
}
Giesburts
  • 5,096
  • 10
  • 34
  • 70
0

added

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

edit position your code

#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/

Duc Nguyen
  • 416
  • 3
  • 6
-1

Try putting a class to your div and editing every element that is contained inside of it in the css file. Try like that in your html: 

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

And in your .css, you will edit your < p > 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; 
    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*/
}
Iskren Mitov
  • 26
  • 3