1

Have a look at this test site: https://dev.amberaviationacademy.com.au/testinstagram

I want to center the entire instagram images block to center. e.g. like this:

enter image description here

Based on this: How can I center a div within another div?, what I need to do is the set margin 0 auto for the instergram block and set width: 90%. Setting percentage is good when we don't resize the browser. Is it a way to set it auto-center, even when the browser resize.

kenpeter
  • 7,404
  • 14
  • 64
  • 95

1 Answers1

0

You need to make two changes: add text-align: center to .content and add display: inline-block; to a:

.block-instagram-block .content {
    display: inline-block;
    text-align: center; 
}

a {
    color: #222;
    text-decoration: none;
    display: inline-block;
}
Banzay
  • 9,310
  • 2
  • 27
  • 46
  • Could you explain how it works? Does it mean if parent element set to text-align center, any inline-block will be centered? – kenpeter Jan 12 '17 at 05:50
  • `text-align: center;` makes all children to be centered inside the parent. children display should be set as `inline-block` to prevent stand each child to new line if it would be `block`. So in parent we center children and `inline-block` children come in one line filling whole width of parent. – Banzay Jan 12 '17 at 05:54
  • is it working fine? I tried it but not working all the images are aligned center only! – sansan Jan 12 '17 at 05:58
  • @user7357089 You have the right to create a new question in SO and to describe your problem details. – Banzay Jan 12 '17 at 06:00