The problem is this. The block with the class .more seems to have "frozen" in vertical space. I can not shift it higher, as I need (so that it would be vertically in the middle of the main unit). Tell me, what's the catch

 .event { min-height: 1px; } .date { float: left; margin-right: 20px; } .date span { display: block; text-transform: uppercase; color: #668333; font-family: 'ProximaNova-Bold'; font-size: 1.3em; } .date .number { font-size: 2.5em; line-height: 1; } .date-desc h4 { color: #e67d6c; line-height: 1; } .date-desc .date-time { line-height: 1; } .date-time .day { font-weight: bold; padding-right: 5px; border-right: 1px solid #000; } .more { margin-left: 90%; margin-bottom: 20px; } 
 <div class="events"> <h3>upcoming events</h3> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> </div>

    2 answers 2

    Set the block position: relative; top: -50px; position: relative; top: -50px; and move as much as you need vertically by changing the value of top

     .event { min-height: 1px; } .date { float: left; margin-right: 20px; } .date span { display: block; text-transform: uppercase; color: #668333; font-family: 'ProximaNova-Bold'; font-size: 1.3em; } .date .number { font-size: 2.5em; line-height: 1; } .date-desc h4 { color: #e67d6c; line-height: 1; } .date-desc .date-time { line-height: 1; } .date-time .day { font-weight: bold; padding-right: 5px; border-right: 1px solid #000; } .more { margin-left: 90%; margin-bottom: 20px; position: relative; top: -50px; } 
     <div class="events"> <h3>upcoming events</h3> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> </div> 

       .event { display: table; width: 100%; clear:both; } .date { float: left; margin-right: 20px; } .date span { display: block; text-transform: uppercase; color: #668333; font-family: 'ProximaNova-Bold'; font-size: 1.3em; } .date .number { font-size: 2.5em; line-height: 1; } .date-desc h4 { color: #e67d6c; line-height: 1; } .date-desc{ float:left; } .date-desc .date-time { line-height: 1; } .date-time .day { font-weight: bold; padding-right: 5px; border-right: 1px solid #000; } .more { margin-left: 80%; margin-bottom: 20px; } 
       <div class="events"> <h3>upcoming events</h3> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> <div class="event"> <div class="date"> <span class="number">20</span> <span class="month">july</span> </div> <div class="date-desc"> <h4>family sunday</h4> <div class="date-time"> <span class="day">Sunday</span> <span class="time">9.30am</span> </div> </div> <div class="more"> <a href="">MORE</a> </div> </div> </div>

      Try this and align as you please. Truth with line-height you something wise