简体   繁体   中英

center using margin:auto for an img in a paragraph is not working

I am trying to center an image inside a <p> I used this website, http://www.w3.org/Style/Examples/007/center.en.html , and also found similar examples here but nothing seems to work.

My HTML code is

<div class="span4">
     <h3 class="aglow" id="h3Body">Forms</h3>
     <p>
        <a class="btn btn-link "href="teacher_forms_list.html">
           <img class="operationsButtons" src="NewForms.png" alt="forms">
        </a>
     </p>
</div>

and my CSS

   img.operationsButtons {
       display: block;
       margin-left: auto;
       margin-right: auto;    
   }

but for some reason the image is still on the left (attaching a picture of the image and a h3 that is centered over it)

不居中

thank you for your help

Simply put

p
{
text-align: center;
}

As @Tamil Selvan answred, you can simply use text-align: center; - Demo

If you are using margin: auto; than you need to define width for your img element as well as display: block; as img is an inline element by default - Demo

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM