css-made arrow appearing in the wrong place

Question

I made a simple 'arrow' in CSS and I'm trying to get it to appear below a set of tabled divs.

I tried this solution: CSS element appearing in wrong place but it didn't work.

I also tried this: Style of CSS element fails onces float:right is added to div

I tried making a jsfiddle but the arrow is in the right place there :( so I'm not sure what I'm doing wrong. But any ideas you have would be a great help.

Here is the CSS for the arrow:

a.btndown {
  height: 40px;
  width: 30px;
  padding: 0px 0px;
  color: #ffffff;
  background-color: #007bff;
  position: relative;
  clear: both;
  display: inline-block;
}

a.btndown:after {
  position: relative;
  bottom: -60px;
  left: -15px;
  content: " ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 30px 30px 0px 30px;
  border-color: #007bff transparent transparent transparent;
}

.images {
  position: relative;
  width: 465px;
}

.images p {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  width: 445px;
  color: #FFF;
  margin-left: 0px;
  margin-bottom: 4px;
  background-image: url(../images/black.png);
  color: #FFFFFF;
}

<p>
  <div id="num-02" class="images">img src, etc</div>
</p>
<p>
  <div id="num-01" class="images">img src, etc</div>
</p>
<p align="center">
  <a href="" id="myarrow" class="btndown"></a>
</p>

I want the arrow to appear BELOW the divs, but it's appearing above them.

EDIT: I made a working fiddle: https://jsfiddle.net/zrkqjcsg/2/

Answer 1

Try removing align=center from this tag

<p align="center">
  <a href="" id="myarrow" class="btndown"></a>
</p>

The p tag is taking the full width of it's parent and then centering the arrow within it. If you want to center the arrow under the text then you will need to change the arrow p tag to display:inline-block and set it's width. Or introduce a parent to the table and set it's width.

 <p align="center" style="display: inline-block; width:150px >
     <a href="" id="myarrow" class="btndown"></a>
 </p>