居中<ul>标签
我无法将这个无序列表库放在页面中心。我已经尝试过来自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>
6 个答案:
答案 0 :(得分：2)
替换它：
#galleryArea {
display: inline-block;
width: 90%;
margin: 0 auto;
}
由此：
#galleryArea {
display: block;
width: 90%;
margin-left: auto;
}
答案 1 :(得分：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>
答案 2 :(得分：1)
这应该可以解决问题...我希望你喜欢脾气暴躁的猫：P
屏幕截图：
// 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;
}
答案 3 :(得分：0)
您可以为图库div指定一个特定的宽度，并指定相等的margin-right和margin-left值。
尝试：
#galleryArea
{
width:80%;
margin-right:10%;
margin-left:10%;
}
答案 4 :(得分：0)
这是我的提示：
CSS：
scipy.spatial.cKDTreeHTML：
#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;。
答案 5 :(得分：0)
固定每张图像下方的中心图像和居中文字！
#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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？