居中 <ul> 标签答案

【问题标题】：Centering <ul> tag居中 <ul> 标签
【发布时间】：2015-10-27 11:13:44
【问题描述】：

我无法让这个无序列表库在页面中居中。我已经尝试了来自 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>

【问题讨论】：

你能把这个放到 js fiddle 里吗？这将有助于更快地回答您的问题。
你的 HTML 是一团糟。你在ul 中有一堆流氓链接。
为什么人们会反对这样的问题？
为什么人们发布 cmets 说他们太无聊了，无法回答问题？说你对某人的问题感到厌烦似乎 (a) 自命不凡，(b) 居高临下，以及 (c) 荒谬地不具建设性。

标签： html css html-lists gallery centering

【解决方案1】：

这应该可以解决问题......我希望你喜欢脾气暴躁的猫：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;
}

【讨论】：

【解决方案2】：

已修复每个图像下方的居中图像和居中文本！

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

【讨论】：

【解决方案3】：

这是一个小提琴（点击图片）

记得清除浮动。

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

【讨论】：

【解决方案4】：

这是我的建议：

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”内。

【讨论】：

【解决方案5】：

您可以为画廊 div 分配特定宽度，并分配相等的 margin-right 和 margin-left 值。

试试：

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

【讨论】：

【解决方案6】：

替换这个：

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

通过这个：

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

Here is the JSFiddle demo

【讨论】：

它有效，但您愿意解释一下为什么margin: 0 auto 在这种情况下不起作用吗？
margin: 0 auto 相当于margin-left: auto; margin-right: auto; 两者同时应用。在您的情况下，您只需要 margin-left 将 ul 居中。添加margin-right 搞砸了。因此我只指定了margin-left
我知道它是一样的，但我通常看到margin: 0 auto for centering a div，所以我想知道为什么它现在搞砸了。
@GolezTrol 我猜那是由于display: inline-block; css 属性在应用时部分地做了一些自己的居中:)