CODEWITHSUNDEEP
htmlcss
N Sharma
N Sharma

Reputation: 34507

How to center align multiple DIV elements

Hello guys I am learning HTML & designing web templates. I got stuck while setting the team member of attached screenshot to center. I want to set the team member align to center but my below code is not working.

<!----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---->

Update

Please see my css here http://pastebin.com/MrbUKbzY

Thanks in advance.

enter image description here

Upvotes: 2

Views: 140

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206565

If you're learning, then see this: 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;
}

Upvotes: 2

Ahmad Bilal
Ahmad Bilal

Reputation: 382

you need to use the a new feature from HTML5

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

Not only would this center your divs but will also make the page responsive, i.e., based on the screen width, the appropriate no of profiles would be shown. You need to add these 3 css rules to the div that contains the image blocks.

Upvotes: 0

chconger
chconger

Reputation: 107

Change col-md-3 to col-md-6 

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

Bootstrap has rows which are 12 wide.

Also, surround the two "col" divs with

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

Upvotes: 1

Swetha
Swetha

Reputation: 746

Check this fiddle: http://jsfiddle.net/of9Lcn67/2/

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

Upvotes: 0

universe
universe

Reputation: 1

<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>

Upvotes: 0

Related Questions