CSS centering of an image not working

19,331
#presentation-highlights {
text-align:center;
width:100%;
display:block;
margin:auto;
}
Share:
19,331
Greg
Author by

Greg

Working in the banking industry but love working on friends and family websites during my spare time

Updated on June 25, 2022

Comments

  • Greg
    Greg almost 2 years

    I'm trying to center an image (forces.png) horizontally using margin-left and margin-right auto but the image remains left-aligned. My site is http://goo.gl/cHO1u What's wrong with the code I'm using? Thanks

    HTML:

    <div class="section" id="presentation">
    <div id="presentation-highlevel">
    <p>NOTRE ENTREPRISE</p>
    <p>ddfdsfdsfdsfdsjfl dfljdsfdsfjdsjfdlksj dfljdslfjldsjflkdsjflsjfdls ldf,dlsmjfdsjfsdmfjdmsjfms dfmdsfjmdsjfmdsjfmdsjfdlms mkdfmksdmfkdmsfkdsfdsmfkmldskf dfmdmkfmdkfmdlskf dfkdmfkdmkfmdskf dfmkdsmfkdsmkfmdskfdms dskfdsmkfdsmkfmdsfkd </p>
    </div>
    <div id="presentation-highlights"><img src="images/forces.png" alt="Picture" /></div>
    </div><!--END page1-->
    

    CSS:

    #presentation
    {
        height:1300px;
        background:#afc9ff; 
      background: url(../images/norway-landscape60.jpg) no-repeat center fixed; 
      -webkit-background-size: cover; /* pour Chrome et Safari */
      -moz-background-size: cover; /* pour Firefox */
      -o-background-size: cover; /* pour Opera */
      background-size: cover; /* version standardisée */
    }
    
    #presentation-highlights
    
    {
    width: 100%;
    display: block;
    margin-left:auto;
    margin-right:auto;
    }