HTML错误，图像未对齐中间

Question

I have an html file, and I am using bootstrap and Gentelella template, for some reason the only image I display in the widget is aligned to the right, and nothing that I do changes it to the middle.

Edit: For the css I am just using the regular bootstrap.min.css and the Gentella custom.css here:

.img-circle.profile_img {
width: 70%;
background: #fff;
margin-left: 15%;
z-index: 1000;
position: inherit;
margin-top: 20px;
border: 1px solid rgba(52, 73, 94, 0.44);
padding: 4px
}

HTML:

   <div class="row">
   <div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
  <div class="x_title">
    <h2>Summary</h2>
    <div class="clearfix"></div>
  </div>
  <div class="x_content">
    Users sneak peek should be inserted here...
  </div>

  <div class="col-md-3 col-xs-12 widget widget_tally_box">
    <div class="x_panel fixed_height_390">
      <div class="x_content">

        <div class="flex">
          <ul class="list-inline widget_profile_box text-center">
            <li>
              <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" align="middle" class="img-circle profile_img">
            </li>
          </ul>
        </div>
        <h3 class="name">User Name</h3>

        <div class="flex">
          <ul class="list-inline count2">
            <li>
              <h3>123</h3>
              <span>Questions</span>
            </li>
            <li>
              <h3>1234</h3>
              <span>Answered</span>
            </li>
            <li>
              <h3>123</h3>
              <span>Unanswered</span>
            </li>
          </ul>
        </div>
        <p>
          Click here to see all the detailed information about this user.
        </p>
      </div>
    </div>
  </div>

</div>

Answer 1

Since .list-inline makes the li 's inline-block , you can use .text-center on the ul to center the li

btw, the align attribute is obsolete on an img - https://www.w3.org/TR/html5/obsolete.html

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-3 col-xs-12 widget widget_tally_box"> <div class="x_panel fixed_height_390"> <div class="x_content"> <div class="flex"> <ul class="list-inline widget_profile_box text-center"> <li> <img src="images/user.png" class="img-circle profile_img"> </li> </ul> </div> <h3 class="name">User Name</h3> <div class="flex"> <ul class="list-inline count2"> <li> <h3>123</h3> <span>Questions</span> </li> <li> <h3>1234</h3> <span>Answered</span> </li> <li> <h3>123</h3> <span>Unanswered</span> </li> </ul> </div> <p> Click here to see all the detailed information about this user. </p> </div> </div> </div>