图片上方的文字，仍然是中间和中间

Question

目标：
图片上方的文字，它应该居中和中间（第一行是文本，下一行是图片）

问题：
我尝试过使用clear：both，display：block或者类似但是它不起作用。 我错过了什么代码？

谢谢！

#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>