Text above the picture and still to be center and middle - html

Question

Goal:
Text above the picture and it should be centered and middle(First row is text and the next row is picture)
Problem:
I have tried using clear:both, display: block or similar but it doesn't work.
What code am I missing?
Thank you!
#parent {
display: flex;
}
#test1,
#test2{
border-top: 1px solid black;
border-bottom: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
background: white;
width: 200px;
height: 200px;
padding:15px 15px 15px 15px;
flex: 1;
}
#test1 {
border-left: 1px solid black;
border-right: 1px solid black;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#test2 {
border-right: 1px solid black;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#test1:hover {
background-color:#DCDCDC;
}
#test1:visited {
text-decoration:none;
text-decoration: none;
text-decoration-color: none;
background-color:none;
color: none;
}
#test2:hover {
background-color:#DCDCDC;
}
<div id="parent">
<a href="#">
<div id="test1">
picture1
<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
</div>
</a>
<a href="#">
<div id="test2">
picture2
<img src="https://cdn3.iconfinder.com/data/icons/catcommerce-black/120/search-64.png" width="64" height="64">
</div>
</a>
</div>