Tri-element centered row

by Daniel Sumner Magruder

HTML

<section class="tri-element-rows">
  <div class="left-element">
    <p>
    <span class="title">LEFT ELEMENT</span><br>
    <span class="subtitle"> I am the left element</span>
    </p>
  </div>
  <div class="middle-element">
    <img>
  </div>
  <div class="right-element">
    <p>
    <span class="title">RIGHT ELEMENT</span><br>
    <span class="subtitle"> I am the right element</span>
    </p>
  </div>
</section>

<section class="tri-element-rows">
  <div class="left-element">
    <p>
    <span class="title">LEFT ELEMENT</span><br>
    <span class="subtitle"> I am the left element</span>
    </p>
  </div>
  <div class="middle-element">
    <img>
  </div>
  <div class="right-element">
    <p>
    <span class="title">RIGHT ELEMENT</span><br>
    <span class="subtitle"> I am the right element</span>
    </p>
  </div>
</section>

CSS

/*------------------------------------------------
 *                                              *
 *                ROW CONTAINER                 *
 *                                              *
------------------------------------------------*/
section.tri-element-rows{
  margin: 3em auto;
  position: relative;
  display: block;
  width: 100%;
  
  /* Visualize the element */
  border-style: solid;
  border-width: 5px;
  border-color: grey;
  
  /* This should auto size around the elements within*/
  height: 10em; 
  
}

section.tri-element-rows div{
  /* Visualize the element */
  border-style: solid;
  border-width: 5px;
  position: relative;
}


/*------------------------------------------------
 *                                              *
 *                 LEFT ELEMENT                 *
 *                                              *
------------------------------------------------*/
section.tri-element-rows div.left-element {
  width: 33%;
  /* Should be left of the middle element */
  float:left;
  
  /* Needs fixed spacing */
}
section.tri-element-rows div.left-element p{
  text-align: right;
  margin-right:10px;
}

/*------------------------------------------------
 *                                              *
 *                MIDDLE ELEMENT                *
 *                                              *
------------------------------------------------*/
section.tri-element-rows div.middle-element {
  /* Should be centered always */
  position: absolute;
  
  /* Fixed size */
  width: 150px;
  height: 150px;
  
  /* Move back to center size */
  margin-left: -75px;
  
  /* Position at middle of the page */
  left: 50%
}

section.tri-element-rows div.middle-element img {
  width: 150px;
  height: 150px;
}

/*------------------------------------------------
 *                                              *
 *                RIGHT ELEMENT                 *
 *                                             ...