Align text below rotated div

i need some help with centering a text below a rotated div.

I can place the text on the div, but not below and in center.

HTML:

<div id="contact_main2">

<div id="marker_align"

<div class="marker">
<p>Test</p>
</div>
<div class="marker">
</div>
<div class="marker">
</div>

</div>
</div>

The whole code: http://jsfiddle.net/GVsxF/

Hope someone can help me out

Solution

Try separating out the <p> tag from inside the marker <div>:

HTML:

<div id="marker_align">

<!-- changed in EDIT -->
<div class="marker-group">
  <div class="marker"></div>
  <div class="marker"></div>
  <div class="marker"></div>
</div>

  <div class="marker-label">
    <p>Test</p>
  </div>

  <div class="marker-label">
    <p>Test</p>
  </div>

  <div class="marker-label">
    <p>Test</p>
  </div>

</div>

In your CSS, delete the .marker p rule and add this:

.marker-label {
    display: inline-block;
    vertical-align: top;
    width: 45px;
    height: 45px;
    margin: 0px 50px 0px 20px;
}

.marker-label p {
    text-align: center;
}

/* added in EDIT */
.marker-group {
    clear: right;
}

JSFIDDLE

EDIT

Added .marker-group and clear:right to prevent text from moving on browser re sizing. This will need additional improvements if browser is re sized to smaller width. JSFiddle has been updated to reflect changes