HTML 错误，图像未与中间对齐

Question

我有一个 html 文件，我正在使用引导和 Gentelella 模板，出于某种原因，我在小部件中显示的唯一图像向右对齐，我所做的任何事情都不会将其更改为中间。

编辑：对于css，我只是使用常规的bootstrap.min.css和Gentella自定义.css在这里：

.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

由于.list-inline使li的inline-block，你可以使用ul上的.text-center来居中li

顺便说一句，align属性在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>