0

I can't get this unordered list gallery to center up in the page. I've tried all sorts of suggestions from sof&google but I still can't get it right. Plz help. Thanks!

Here is the CSS that i wrote.

#galleryArea {
  display: inline-block;
  width: 90%;
  margin: 0 auto;
}
#gallery {
  list-style: none;
}
#gallery img {
  width: 100%;
  height: auto;
  max-width: 250px;
  max-height: 250px;
}
#gallery li {
  float: left;
  width: 25%;
  margin: 0 1.6%;
  text-align: center;
}
#gallery a {
  color: black;
}
<body>
  <div id="galleryArea">
    <ul id="gallery">
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#" class="clearFloat">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
    </ul>
  </div>
</body>
GolezTrol
  • 114,394
  • 18
  • 182
  • 210
snorty_
  • 33
  • 6

6 Answers6

2

Replace this:

#galleryArea {
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

By this:

#galleryArea {
    display: block;
    width: 90%;
    margin-left: auto;
}

Here is the JSFiddle demo

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • It works, but would you care to explain why `margin: 0 auto` doesn't work in this case? – GolezTrol Aug 04 '15 at 21:33
  • 1
    `margin: 0 auto` is equivalent to `margin-left: auto; margin-right: auto;` both applied at the same time. In your case you need only `margin-left` to center the _ul_. Adding `margin-right` messes it up. Therefore I specified only `margin-left` – Ahs N Aug 04 '15 at 21:39
  • I know it is the same, but usually I see [`margin: 0 auto` for centering a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div), so I wondered why it messes things up now. – GolezTrol Aug 04 '15 at 21:44
  • @GolezTrol I guess thats due to the `display: inline-block;` css property thats partially doing some centering of its own when applied :) – Ahs N Aug 04 '15 at 21:47
2

Here's a fiddle (click image) JSFiddle

Remember to clear floats.

#gallery:after {
    clear: both;
}
#gallery:before, #gallery:after {
    content: ' ';
    display: table;
}

To center something, you should declare a width on a block element and set it's left and right margin to auto: margin: 0 auto;

#galleryArea {
    margin: 0 auto;
    width: 80%;
}
#gallery {
    list-style-type: none;
    background: #bada55; 
}

In the html, you should place the <a> tags inside the <li>'s and not around them.

<div id="galleryArea">
    <ul id="gallery">
        <li>
            <a href="#">
                <img src="img/img.png" />
                <p>Desc...</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/img.png" />
                <p>Desc...</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/img.png" />
                <p>Desc...</p>
            </a>
        </li>        
        <li>
            <a href="#">
                <img src="img/img.png" />
                <p>Desc...</p>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="img/img.png" />
                <p>Desc...</p>
            </a>
        </li>        
    </ul>
</div>
Todd
  • 5,314
  • 3
  • 28
  • 45
1

This should do the the trick... I hope you like grumpy cat :P

Here is the JSFiddle demo

Screenshot:

enter image description here

//HTML

<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">>
</head>
<body>
<section id="gallery">
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
    <div class="item">
        <img src="http://cdn.bleedingcool.net/wp-content/uploads/2015/04/too_good_for_grumpy_cat.jpg"/>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div> 
</section>
</body>
</html>

//CSS

body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
}   
#gallery{
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

}
.item {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;

    min-width: 300px;
    max-width: 300px;   

    margin: 5px;
    padding: 10px;

    -webkit-justify-content: center;
    justify-content: center;

    background: #ccc;
    border: 2px solid black;
    border-radius: 5px;
    cursor: pointer;
}
.item:hover{
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
img{
    display: -webkit-flex;
    display: flex;

    -webkit-algin-self: center;
    align-self: center;


    -webkit-background-size: cover;
    background-size: cover;

    border: 2px solid black;

    max-width: 250px;
    max-height: 141px;
}
p{
    text-align: center;
    color: #fff;
    margin: 5px;
}
Jordan Davis
  • 1,485
  • 7
  • 21
  • 40
0

You can assign an specific width to the gallery div and asign equal margin-right and margin-left values.

Try:

#galleryArea
{
  width:80%;
  margin-right:10%;
  margin-left:10%;
}
Kinari
  • 168
  • 9
0

Here is my tip:

CSS:

#galleryArea {
    text-align: center;
}

#gallery {
    display: inline-block;
    list-style:none;
    margin: 0;
    padding: 0;
    width: 90%;
}

#gallery img {
    height: auto;
    max-height: 250px;
    max-width: 250px;
    width: 100%;
}

#gallery li {
    float: left;
    margin: 0 1.6%;
    text-align: center;
    width: 21.8%;
}

#gallery a {
    color: black;
    display: block;
}

HTML:

<body>
    <div id="galleryArea">
        <ul id="gallery">
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
        </ul>
    </div>
</body>

Demo: https://jsfiddle.net/k34ps7vt/

Btw... that "margin: 0 auto" in your code does not work, because the "#galleryArea" is styled as inline-block. Try to change it to block.

Btw #2: Your code is not valid. You need to have an "A" to be inside "LI".

Petr
  • 111
  • 7
0

Centered images and centered text beneath every images fixed!

#galleryArea {
    display: inline-block;
    width: 90%;
  margin-left: 10% ;
  margin-right: 10% ;
}

#gallery {
    list-style:none;
}

#gallery img {
    width: 100%;
    height: auto;
    max-width: 250px;
    max-height: 250px;
}

#gallery li {
    float: left;
    width: 25%;
    margin: 0 1.6%;
}

#gallery a {
    color: black;
}
#gallery a,p {
    text-align:center;
}
<body>
<div id="galleryArea">
    <ul id="gallery">
        <li><a href="#">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
        <li><a href="#">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
        <li><a href="#" class="clearFloat">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
        <li><a href="#">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
        <li><a href="#">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
        <li><a href="#">
            <img src="img/img.png" />
            <p>Desc...</p>
        </a></li>
    </ul>
</div>
</body>
Lars Angelo Trab
  • 1
  • 1