CODEWITHSUNDEEP
htmlcssthumbnailsimage-gallerytwitter-bootstrap-2
danelig
danelig

Reputation: 383

Centre a responsive thumbnail gallery

Here is my site:

http://www.gregorydanelian.comule.com/ken

I want thumbnail gallery to be centred at all times but I am having trouble doing this.

I know I can use 

text-align: center;

On the parent element and then set the thumbnails like so:

display: inline-block;

However nothing is working, the thumbnails always float left.

I have tried adding media queries to force the margin from left (for example):

@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;   
}
}

But there must be an easier way to just get the ul to centre no matter what the width is.

How can I centre the thumbnail gallery on all browser widths?

Upvotes: 0

Views: 367

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122067

Add these changes and remove those left-margins you set !important on ul

.thumbnails > li {
  display: inline-block;
  float: none;
  margin-bottom: 20px;
  margin-left: 20px;
}

.thumbnails {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

Important: Add this to end of your css/mystyles.css file.

Upvotes: 1

Lucky Chingi
Lucky Chingi

Reputation: 2258

Add this CSS media query

@media (min-width: 1200px)
.thumbnails {
    max-width:1200px
}

you may have to adjust media queries for multiple screens.

Upvotes: 1

Related Questions