Html 是否可以这样定位图像（可能没有浮动）？
我尝试以以下方式定位图像，从左到右开始，并将其保持在屏幕中央： 但是，我不能让它这样做，相反，最后一个图像始终显示在行的中心，如下图所示： 有没有一种方法可以像那样显示它，但同时也可以将它保持在屏幕的中心 我在#gallery>div中使用显示：内联块 代码： HTML:Html 是否可以这样定位图像（可能没有浮动）？,html,css,css-float,css-position,Html,Css,Css Float,Css Position,我尝试以以下方式定位图像，从左到右开始，并将其保持在屏幕中央： 但是，我不能让它这样做，相反，最后一个图像始终显示在行的中心，如下图所示： 有没有一种方法可以像那样显示它，但同时也可以将它保持在屏幕的中心 我在#gallery>div中使用显示：内联块 代码： HTML: <div class="container"> <header> <div id="logo">
<div class="container">
<header>
<div id="logo">
<img src="" alt="">
</div>
<nav class="cl-effect-21">
<ul>
<li>
<a href="index.html" class="scroll">
<span data-hover="Home">Home</span>
</a>
</li>
<li>
<a href="#about" class="scroll">
<span data-hover="About Us">About Us</span>
</a>
</li>
<li>
<a href="#services" class="scroll">
<span data-hover="Services">Services</span>
</a>
</li>
<li>
<a href="Portfolio.html" class="scroll">
<span data-hover="Portfolio">Portfolio</span>
</a>
</li>
<li>
<a href="#testimonials" class="scroll">
<span data-hover="Testimonials">Testimonials</span>
</a>
</li>
<li>
<a href="Contact.html" class="scroll active">
<span data-hover="Contact Us">Contact Us</span>
</a>
</li>
</ul>
</nav>
</header>
<div class="portfolio clearfix">
<div id="gallery">
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/1.jpg">
<img src="assets/images/DesiGotTalent3/1.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/2.jpg">
<img src="assets/images/DesiGotTalent3/2.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/3.jpg">
<img src="assets/images/DesiGotTalent3/3.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/4.jpg">
<img src="assets/images/DesiGotTalent3/4.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/5.jpg">
<img src="assets/images/DesiGotTalent3/5.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/6.jpg">
<img src="assets/images/DesiGotTalent3/6.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/7.jpg">
<img src="assets/images/DesiGotTalent3/7.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper">
<a href="assets/images/DesiGotTalent3/8.jpg">
<img src="assets/images/DesiGotTalent3/8.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
<div id="img-wrapper" class="last">
<a href="assets/images/DesiGotTalent3/9.jpg">
<img src="assets/images/DesiGotTalent3/9.jpg" alt="">
<div id="overlay">
<h1 class="fa fa-search"></h1>
</div>
</a>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer>
<div id="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-vimeo"></span>
<span class="fa fa-youtube"></span>
</div>
<h3>© 2016 Dinesh Joshi Photography</h3>
</footer>
/** External Stylesheet **/
* { margin: 0; }
html, body { height: 100%; }
.container {
min-height: 100%;
margin: 0 auto -60px;
}
footer, .push {
height: 20px;
padding: 20px 0px;
}
footer {
font-size: 10px;
text-align: center;
}
#social {
margin-bottom: 5px;
}
#social span {
border: 1px solid rgba(0,0,0,.2);
margin: 0px 3px;
font-size: 1.6em;
width: 1.6em;
text-align: center;
line-height: 1.6em;
background: #D4AF37;
color: white;
border-radius: 50%;
}
/** Header **/
header {
padding-top: 30px;
}
ul {
text-align: center;
}
ul li {
display: inline-block;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
margin: 0px 8px;
}
nav a {
position: relative;
display: inline-block;
outline: none;
color: black;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 12px;
font-family: 'Roboto', sans-serif;
}
nav a:hover,
nav a:focus {
outline: none;
}
/* Effect 21: borders slight translate */
.cl-effect-21 a {
padding: 10px;
color: black;
font-weight: 400;
text-shadow: none;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.cl-effect-21 a::before,
.cl-effect-21 a::after {
position: absolute;
left: 0;
width: 100%;
height: 1.2px;
background: #D4AF37;
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.active {
border-top: 1.2px solid #D4A347;
border-bottom: 1.2px solid #D4A347;
}
.cl-effect-21 a::before {
top: 0;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.cl-effect-21 a::after {
bottom: 0;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
}
.cl-effect-21 a:hover::before,
.cl-effect-21 a:focus::before,
.cl-effect-21 a:hover::after,
.cl-effect-21 a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
/* End of external stylesheet */
.portfolio {
width: 100%;
margin:0 auto;
}
#gallery {
width: 100%;
margin:0 auto;
padding: 0px 10px;
display: table;
text-align: center;
}
#gallery img {
width: 100%;
height: auto;
}
#gallery > div {
width: 150px;
height: 140px;
display:inline-block;
vertical-align:top;
background-color:black;
margin: 5px;
}
#gallery a div {
position:absolute;
width: 150px;
margin:0 auto;
text-align: center;
top: 0;
right:0;
left:0;
bottom:0;
z-index: 1;
transform: translate(-110%, 0);
-webkit-transition: all .3s ease-in-out;
display:none;
}
#gallery a:hover #overlay {
background-color:rgba(212, 175, 55, .3);
transform: translate(0,0);
}
#gallery div:nth-of-type(9) {
text-align: left;
}
#gallery h1 {
font-size: 20px;
color:white;
margin:3.6em 0px;
}
.clearfix {
clear: both;
}
你可以把整个4张图片放在一个容器中，然后在这个容器中，你可以用一定数量的像素来初始化照片，然后就应该完成了 您可以使用flexbox-her更新您的“我已经删除了在display flex中添加的#gallery上的显示表”（默认为行）并添加了一个换行符
#gallery {
display: flex;
flex-wrap: wrap;
width: 100%;
margin:0 auto;
padding: 0px 10px;
text-align: center;
}
我已经更新了fiddle链接，这有点脏，但希望它能激发一些想法。唯一需要注意的是，如果您正在寻找响应性设计，则必须在窗口上执行逻辑。这就是为什么我认为这不是一个完美的解决方案。我找到了答案。看起来图像大小不同，因此无法从左到右正确浮动
通过在图像中添加明确的高度来修复此问题嗯，我在一小时前看到了完全相同的问题，但您已将其删除。为什么你要重新发布这个问题？从来没有两个相同的ID可能重复确定不，实际上是这个问题在上面的链接中做了你想做的事情，而不是答案。布局中的项目数量会保持不变吗？它会一直被知道吗？这不是在做类似的事情吗？这部分是我想要的，但整个图像集不在屏幕的中心，它们更多地位于左侧。我想要的是所有东西都居中，最后一张图片（第三行）从左边开始