html - 如何将一个 div 居中放置在底部并在中心制作另一个可实现的 div？

Question

所以我正在尝试创建一个显示和图像的 div，并在底部有一个图像标题。图像应该有足够的空间，这样它就不会被拉伸(stretch)并且看起来很奇怪。然后我想使用那个 div 并为尽可能多的图像一遍又一遍地复制它。

我画了我正在尝试的图像!描述我希望你们理解它。

这是我目前的代码。我知道它不是很多，但我有点迷路。

.box{
	height:250px;
	width:200px;
	margin-top:10px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:10px;
	float:left;
	background-color:yellow;
}

.photo-div{
	height:50px;
	width:50px;
	background-color:blue;
}

.title-wrap{
	height:40px;
	width: 200px; 
	background:pink;
}

<div class="box">
	<div class="photo-div">
	</div>
    <div class="title-wrap">
    </div>
</div>

Answer 1

正在寻找这样的东西吗？

.box{
	height:250px;
	width:200px;
	margin-top:10px;
	margin-right:15px;
	margin-left:15px;
	margin-bottom:10px;
	float:left;
	background-color:yellow;
}

.row{
	height:70px;
	width:200px;
    display: inline;
}

.column{
	height:70px;
	width:50px;
    display: inline;
    float:left;
}

.photo-div{
	height:50px;
	width:50px;
	background-color:blue;
}

.title-wrap{
	height:20px;
	width: 50px; 
	background:pink;
    text-align: center;
}

<div class="box">
    <div class="row">
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>        
    </div>
    <div class="row">
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>
        <div class="column">
	        <div class="photo-div">
                <img src="https://cdn4.iconfinder.com/data/icons/pretty_office_3/48/Globe.png"/>               
	        </div>
            <div class="title-wrap">IMG</div>
        </div>        
    </div>
</div>