如何垂直对齐(调整)多个元素 [英] How to vertically align (justify) multiple elements

问题描述

我不太确定该说些什么，但是我会尝试的.我想垂直对齐三个不同的元素，所有三个都包装在单独的div中.目前，这是我的代码:

I am not quite sure how to say what I want but I am going to try. I want to vertically align three different elements, all three wrapped in individual divs. Currently this is my code:

.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>

可以随时帮助我纠正任何其他错误...我刚刚开始学习如何编写网站代码.

Feel free to help me correct any other errors...I just started learning how to code a website.

以下是我想要最终产品的图像:(由于我是这个网站的新手，所以我必须链接到它.)

Here is an image of what I want the final product to be: (I have to link to it since I am new to this site.)

fujifame.com/art260/

推荐答案

@GCyrillus具有甚至更干净的代码笔:

@GCyrillus Has a codepen that's even cleaner: http://codepen.io/gc-nomade/pen/raovxv

我设法将您的代码破解为提交.希望对您有所帮助，但是您的代码确实需要重写.根据您拥有的图像，您应该有2列div.星期几应在第一列div中，事件应在第二列中.将css属性foat:left;添加到第二列div中，如果它们不向下移至下一列，则使用CSS属性clear:清除它们.希望这能给您一个良好的开端！给你.

I managed to somewhat hack your code into submission. I hope this helps you out but your code really needs to be rewritten. Based on the image you have, you should have 2 columns of divs. The day of the week should be in the first column div and the events should be in the second. Add the css property foat:left; to your second column divs, and clear them using the CSS property clear: if they arent moving down to the next column. Hope this gives you a head start! Here you go.

.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>

这篇关于如何垂直对齐(调整)多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！