Как вертикально выравнивать (выравнивать) несколько элементов

Question

Я не совсем уверен, как сказать то, что хочу, но я собираюсь попробовать. Я хочу вертикально выровнять три разных элемента, все три обернуты в отдельные div. В настоящее время это мой код:

.service_info { 
 
    margin-top: 45px; 
 
    clear: both; 
 
    background-color: #ffffff; 
 
    font-family: "source-sans-pro", sans-serif; 
 
} 
 
.title_text_serviceinfo { 
 
    margin-top: 85px; 
 
    margin-left: 60px; 
 
    padding-bottom: 20px; 
 
    color: #333132; 
 
    font-size: 24px; 
 
    font-family: "source-sans-pro", sans-serif; 
 
} 
 
.service_info_times { 
 
    margin-top: -110px; 
 
    margin-left: 200px; 
 
    font-size: 18px; 
 
    line-height: 175%; 
 
    border-left: 5px solid #0b496f; 
 
    padding-left: 20px; 
 
    color: #333132; 
 
} 
 
.service_info_events { 
 
    postion: fixed; 
 
    left: 300px; 
 
    top: 20px; 
 
    font-size: 18px; 
 
    line-height: 175%; 
 
    color: #333132; 
 
}

<!--Service Information--> 
 

 
<section class="service_info"> 
 
    <h2 class="secondary_header"> When We Gather </h2> 
 

 
    <h3 class="title_text_serviceinfo"> Sunday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>7:00am</li> 
 
     <li>8:30am</li> 
 
     <li>9:00am</li> 
 
     <li>10:15am</li> 
 
     <li>4:00pm</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="service_info_events"> 
 
    <ul> 
 
     <li>Men's Prayer</li> 
 
     <li>Fellowship Time</li> 
 
     <li>Sunday School</li> 
 
     <li>Worship Service</li> 
 
     <li>Revolution Student Ministries</li> 
 
    </ul> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo"> Monday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>6:00pm</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="service_info_events"> 
 
    <ul> 
 
     <li>Precept Bible Study</li> 
 
    </ul> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo"> Tuesday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>9:15am</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="service_info_events"> 
 
    <ul> 
 
     <li>P.E.A.R.L.S. (Lady's Ministry</li> 
 
    </ul> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo"> Wednesday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>7:00am</li> 
 
     <li>7:00pm</li> 
 
     <li>7:00pm</li> 
 
     <li>7:00pm</li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="service_info_events"> 
 
    <ul> 
 
     <li>Stronger Senior</li> 
 
     <li>CLC</li> 
 
     <li>Club 56</li> 
 
     <li>House of Prayer</li> 
 
    </ul> 
 
    </div> 
 
</section>

Не стесняйтесь, чтобы помочь мне исправить любые другие ошибки ... Я только начал изучать, как код веб-сайта.

Вот образ того, что я хочу, чтобы конечный продукт быть: (я должен ссылаться на него, так как я новичок в этом сайте.)

fujifame.com/art260/

Answer 1

Edit: @GCyrillus Имеет кодекс, который еще чище: http://codepen.io/gc-nomade/pen/raovxv

Мне удалось несколько взломать ваш код в подчинение. Я надеюсь, что это поможет вам, но ваш код действительно нуждается в перезаписи. На основе вашего изображения у вас должно быть 2 столбца div. День недели должен быть в первом столбце div, а события должны быть во втором. Добавьте свойство css foat:left; в свои полные разделители столбцов и очистите их с помощью свойства CSS clear:, если они arent переходят к следующему столбцу. Надеюсь, это даст вам начало! Ну вот.

.header{ clear:both; } 
 
.service_info { 
 
    margin-top: 45px; 
 

 
    background-color: #ffffff; 
 
    font-family: "source-sans-pro", sans-serif; 
 
} 
 
.title_text_serviceinfo { 
 
    margin-top: 100px; 
 
    margin-left: 60px; 
 
    /*padding-bottom: 20px;*/ 
 
    color: #333132; 
 
    font-size: 24px; 
 
    font-family: "source-sans-pro", sans-serif; 
 
    float:left; 
 
    clear:left; 
 
    width:140px; 
 
} 
 
.service_info_times { 
 
    margin-top: 20px; 
 
    /*margin-left: 200px;*/ 
 
    font-size: 18px; 
 
    line-height: 175%; 
 
    border-left: 5px solid #0b496f; 
 
    padding-left: 20px; 
 
    color: #333132; 
 
    float:left; 
 
    clear:right; 
 
} 
 
.service_info_events { 
 
    font-size: 18px; 
 
    line-height: 175%; 
 
    color: #333132; 
 
    clear:right; 
 
} 
 

 
.secondMargin{ margin-top:40px; } 
 
.thirdMargin{ margin-top:80px; }

<section class="service_info"> 
 
    <div id = "header"> 
 
    <h2 class="secondary_header"> When We Gather </h2> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo"> Sunday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>7:00am Men's Prayer</li> 
 
     <li>8:30am Fellowship Time</li> 
 
     <li>9:00am Sunday School</li> 
 
     <li>10:15am Worship Service</li> 
 
     <li>4:00pm Revolution Student Ministries</li> 
 
    </ul> 
 
    </div> 
 

 

 

 
    <h3 class="title_text_serviceinfo secondMargin"> Monday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>6:00pm Precept Bible Study</li> 
 
    </ul> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo secondMargin"> Tuesday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>9:15am P.E.A.R.L.S. (Lady's Ministry)</li> 
 
    </ul> 
 
    </div> 
 

 
    <h3 class="title_text_serviceinfo"> Wednesday </h3> 
 
    <div class="service_info_times"> 
 
    <ul> 
 
     <li>7:00am Stronger Senior</li> 
 
     <li>7:00pm CLC</li> 
 
     <li>7:00pm Club 56</li> 
 
     <li>7:00pm House of Prayer</li> 
 
    </ul> 
 
    </div> 
 
</section>