如何居中对齐多个DIV元素

Question

大家好我正在学习HTML＆amp;设计网页模板。在将附加屏幕截图的团队成员设置为中心时，我遇到了困难。我想将团队成员对齐到中心但我的下面的代码不起作用。

<!----team-members---->
<div class="team-members" align="center">
    <div class="container" >
        <div class="col-md-3 team-member">
            <div class="team-member-info">
                <img class="member-pic" src="images/team-member4.jpg" title="name" />
                <h5><a href="#">Jonh Doe eh</a></h5>
                <span>Lead Designer</span>
            </div>
        </div><!--- end-team-member --->
        <div class="col-md-3 team-member">
            <div class="team-member-info">
                <img class="member-pic" src="images/team-member1.jpg" title="name" />
                <h5><a href="#">Amanda Fenrnicas</a></h5>
                <span>Lead Developer</span>
            </div>
        </div><!--- end-team-member --->
    </div>
<!--//team-members---->

更新

请在此处查看我的css http://pastebin.com/MrbUKbzY

提前致谢。

Answer 1

如果您正在学习，请参阅：http://jsbin.com/momefi/2/edit

  <div id="parent">
    <div class="child">
      <img src="//placehold.it/160x200/cf5&text=John">
      <p>Lorem ipsum dolor sit amet adipiscing elit amantis sinus tus</p>
    </div>
    <div class="child">
      <img src="//placehold.it/160x200/f0f&text=Anna">
      <p>Lorem ipsum dolor sit amet adipiscing elit amantis sinus tus</p>
    </div>
  </div>

#parent{
  border:1px solid #666;
  text-align:center;
}
.child{
  width:160px;
  display:inline-block;
  vertical-align:top;
}

Answer 2

将col-md-3更改为col-md-6

<div class="col-md-6 team-member">

Bootstrap有12行的行。

另外，用

包围两个“col”div

<div class="row">
    <div class="col-md-6 team-member text-right">
    </div>
    <div class="col-md-6 team-member text-left">
    </div>
</div>

Answer 3

<div class="team-members"  style=" width: 100%;">



<div class="container">
    <div class="col-md-6 team-member">
        <div class="team-member-info">
            <img class="member-pic" src="images/team-member4.jpg" title="name">
            <h5><a href="#">Jonh Doe eh</a></h5>
            <span>Lead Designer</span>
        </div>
    </div><!--- end-team-member --->
    <div class="col-md-6 team-member">
        <div class="team-member-info">
            <img class="member-pic" src="images/team-member1.jpg" title="name">
            <h5><a href="#">Amanda Fenrnicas</a></h5>
            <span>Lead Developer</span>
        </div>
    </div><!--- end-team-member --->
</div>

Answer 4

检查这个小提琴：http://jsfiddle.net/of9Lcn67/2/

 div.team-member { width: 20%; float:left;}

Answer 5

您需要使用HTML5中的新功能

display: flex;
flex-flow: row wrap;
justify-content: space-between;

这不仅会使您的div居中，而且还会使页面响应，即，基于屏幕宽度，将显示适当的配置文件。您需要将这3个css规则添加到包含图像块的div中。