Question

我有一个html文件，我正在使用bootstrap和Gentelella模板，由于某种原因，我在窗口小部件中显示的唯一图像与右边对齐，而我所做的任何事情都不会改变到中间。

编辑：对于CSS我只是使用常规的bootstrap.min.css和Gentella custom.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的{{1}}，您可以使用inline-block上的.text-center来ul

顺便说一下，li上的align属性已过时 - https://www.w3.org/TR/html5/obsolete.html

img

HTML Bug，图像不对齐中间

1 个答案: