-4

I am trying to center my div. I used a width px it worked but as soon as I changed width px to display: table; my div went to the left.

background: rgba(225, 245, 245, 0.4);
border-radius: 3px;
bottom: 16px;
display: table;
left: 0;
margin: 0 auto;
padding: 5px;
position: fixed;
right: 0;
text-align: center;

<div id="download">
   <span id="description">The National Geographic Explorer passing under the Seal Island Bridge</span>
                <a href="'.$filenames[$random_index].'" download="'.$filenames[$random_index].'" title="Download this image. Use of this image is restricted to wallpaper only"download>* Download This Image *</a>
            </div>

Thanks for any and all help.

Laurie Williams
  • 41
  • 1
  • 1
  • 4
  • 2
    Please post a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – Rahul Desai Apr 23 '18 at 22:21
  • Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – larsgrefer Apr 23 '18 at 22:25
  • `I changed width px to display: table;`--> what is the relation between width px and display table ? – Temani Afif Apr 23 '18 at 22:30

1 Answers1

0

use flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#your_div {
    display: flex;
    justify-content: center;
    align-items: center
}
dommmm
  • 899
  • 8
  • 16