Question

我无法将这个无序列表库放在页面中心。我已经尝试过来自sof＆amp; google的各种建议，但我仍然无法做到正确。 Plz的帮助。谢谢！

这是我写的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

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

请记得清除花车。

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

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

Answer 4

您可以为图库div指定一个特定的宽度，并指定相等的margin-right和margin-left值。

尝试：

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

Answer 5

这是我的提示：

CSS：

scipy.spatial.cKDTree

HTML：

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

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

顺便说一下......＆＃34;保证金：0自动＆＃34;在你的代码中不起作用，因为＆＃34;＃galleryArea＆＃34;被设计为内联块。尝试将其更改为阻止。

Btw＃2：您的代码无效。你需要一个＆＃34; A＆＃34;进入＆＃34; LI＆＃34;。

Answer 6

固定每张图像下方的中心图像和居中文字！

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

居中<ul>标签

6 个答案: