css - 面板的对齐问题

Question

您好，请查看此链接。我怎样才能使图像居中，因为现在它似乎太向右了

http://jsbin.com/yenade

Answer 1

演示 - http://jsbin.com/xacikizuhe/

使用 left: 50%; 和 transform: translateX(-50%);

.panel-profile .panel-heading img {
  position: absolute;
  margin: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
}

/*demo */

body {
  padding: 5%;
}
.panel {
  max-width: 500px;
  margin: 0 auto
}
/* end demo */

.panel-profile .panel-heading {
  position: relative;
}
.panel-profile .panel-heading h4 {
  margin: 10px 0 20px;
  font-weight: normal;
}
.panel-profile .panel-heading img {
  margin: 0 auto 10px;
  display: block;
  border: 1px solid #ddd;
  background: #fff;
}
@media (min-width: 400px) {
  .panel-profile .panel-heading a {
    font-size: .75em;
    float: right;
  }
  .panel-profile .panel-heading {
    margin-bottom: 30px;
  }
  .panel-profile .panel-heading img {
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -25px;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default panel-profile">
  <div class="panel-heading text-center clearfix">
    <h4>Name of Person</h4>
    <img src="http://placepic.me/profiles/50-50" class="img-circle">

    <a href="#">Edit Profile</a> 
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>