3 Replies - 511 Views - Last Post: 25 May 2014 - 04:14 PM

#1 tomtom13  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 24-May 14

Make an image grid centre responsively

Posted 24 May 2014 - 05:37 PM

Hi,

I have an image grid that is made up of a whole lot of divs, within each div is a heading, a small picture and a description. When the grid is at the maximum width, everything sits in it centred. When the width starts to change it drops the amount of columns that fit in the parent div as needed but I can't work out how to keep everything centred (or if it is possible).

Here the basis of the code I am using:

HTML

<div id="Parent Div">
            <Div class="gallery">
                <h6 align="center">Title</h6>
                <img class="gallery-picture" src="#">
                <p>Description</p>
            </Div> 
            <Div class="gallery">
                <h6 align="center">Title</h6>
                <img class="gallery-picture" src="#">
                <p>Description</p>
            </Div> 
            <Div class="gallery">
                <h6 align="center">Title</h6>
                <img class="gallery-picture" src="#">
                <p>Description</p>
            </Div> 
            <Div class="gallery">
                <h6 align="center">Title</h6>
                <img class="gallery-picture" src="#">
                <p>Description</p>
            </Div> 
       </div>



Here is the CSS:

#Parent Div{
	margin-left:auto;
}

.gallery{
	margin-top:40px auto; 
	padding-bottom:20px;
	width:235px;
	float:left;
	height:350px;
}

.galley-picture{
	display:block;
	text-align:center;
	margin:10px auto 0;
	width:200px;
}

.gallery p{
	text-align:center;
	margin:10px auto 10px;
	padding: 0 21px 0 21px;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Make an image grid centre responsively

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4316
  • View blog
  • Posts: 12,096
  • Joined: 18-April 07

Re: Make an image grid centre responsively

Posted 25 May 2014 - 08:28 AM

If you apply text-align: center; to the .gallery style, that should center everything inside that div, the heading, image and description. This "should" stay constant through a changing viewport.

:)
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3223
  • View blog
  • Posts: 10,819
  • Joined: 12-December 12

Re: Make an image grid centre responsively

Posted 25 May 2014 - 08:31 AM

<div id="Parent Div">

ids should not contain spaces.
Was This Post Helpful? 0
  • +
  • -

#4 tomtom13  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 24-May 14

Re: Make an image grid centre responsively

Posted 25 May 2014 - 04:14 PM

View Postandrewsw, on 25 May 2014 - 08:31 AM, said:

<div id="Parent Div">

ids should not contain spaces.


Thanks, but I only had a space their to explain what I was doing. It is called something else within my code. Thanks, Martry2 I will give that go.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1