照片居中

Question

长话短说，我有 4 张照片，但是当我将屏幕缩小一点时，第 4 张照片向下移动，但它不在填充框中。有帮助吗？

  body {
 background-image: url('background_repeat.jpg')
}
/*Start css for rest of page*/
.header{
text-align: center;
color: white
}
.photos{
 margin: 0px 30px 0px;
 padding: 30px;
 display: inline;
 text-align: center;
 text-overflow: clip;
 }
.media{
display: inline;
padding: 3px;
background-color: grey;
border-radius: 5px;
margin: 10px;
height: 250px;
width: 250px;
}
.inline {
 display: inline;
 text-align: center;
 }

    <div class="body">
        <div class="header">
            <h1>Photos</h1>
        </div>
        <div class="photos">
            <div class="inline">
            <video class="media" width="250" controls>
            <source src="New%20Edit.mp4" type="video/mp4">
            </video>
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">
            <img class='media' src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSv8yf5AnclVcQwBtApNkfNlk5ZZKlxswqNylSgD7PhbACsjbXn">     
            </div>
        </div>
    </div>

我是漏掉了什么还是做错了什么？

Answer 1

从你的.inlineCSSclass中删除display:inline，你会看到第四个方框以[=为中心30=] 在下一行。如果您希望让您的内容具有响应性，并且在任何视口中都能很好地显示，则必须使用 Media Queries，阅读本文您可以对它有全面的了解；

Media Query

和解决方案的jsfiddle；

Image Centered

照片居中

Photo centering

html

css

photo