居中 <ul> 标签

Question

我无法让这个无序列表库在页面中居中。我已经尝试了 sof&google 的各种建议，但我仍然无法做到正确。请帮助。谢谢！

这是我写的CSS

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

Answer 1

替换为：

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

由此:

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

Here is the JSFiddle demo

Answer 2

您可以为图库指定特定宽度 div 并指定相等的右边距和左边距值。

尝试：

#galleryArea
{
  width:80%;
  margin-right:10%;
  margin-left:10%;
}

Answer 3

这是我的提示：

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>

演示：https://jsfiddle.net/k34ps7vt/

顺便说一句...您代码中的 "margin: 0 auto" 不起作用，因为“#galleryArea”被设计为内联块。尝试将其更改为块。

顺便说一句 #2：您的代码无效。您需要有一个 "A" 才能在 "LI".

内

Answer 4

这是 fiddle（点击图片）

记得清除浮动。

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

要居中，您应该在块元素上声明宽度并将其左右边距设置为自动：margin: 0 auto;

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

在 html 中，您应该将 <a> 标签放在 <li>'s 内而不是周围。

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

Answer 5

图片居中和每张图片下方的文字居中已修复！

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

Answer 6

这应该可以解决问题...我希望你喜欢脾气暴躁的猫 :P

Here is the JSFiddle demo

截图：

//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;
}

居中 <ul> 标签

Centering <ul> tag

html

css

gallery

html-lists

centering