Не движение к центру и проблема с адаптивным дизайном - PullRequest
Новая
       71

Не движение к центру и проблема с адаптивным дизайном

0 голосов
/ 30 мая 2020

Я пытаюсь переместить заголовок «Образование» в центр веб-страницы, но при этом сталкиваюсь с проблемой.

В то же время я также работаю над адаптивным дизайном этого раздела, где у меня есть изображение вверху и текст под ним. Может ли кто-нибудь помочь мне в решении этих проблем?

Ниже добавлены коды HTML и CSS.

Спасибо. 

* {
  margin: 0;
  padding: 0;
}

.education-sec {
  width: 100%;
  padding: 40px 0;
  overflow: hidden;
}

.education-width {
  max-width: 1200px;
  overflow: hidden;
  padding: 0 20px;
  margin: auto;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.education-sec h1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
}

.education-info {
  display: table-cell;
  vertical-align: middle;
  width: 60%;
  padding-top: 30px;
  padding-left: 100px;
}

.education-info p {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  font-size: 15px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6;
  overflow: hidden;
  margin: 10px;
}

.ed-under-line h1 {
  -webkit-text-decoration: #f57e3a solid underline;
  text-decoration: #f57e3a solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

.ed-img {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
}

.ed-img .bw_image {
  margin-left: 100px;
  max-width: 100%;
  height: auto;
  padding-top: 50px;
}
<section id="education">
  <div class="education-sec">
    <div class="education-width">
      <div class="ed-under-line">
        <h1>Education</h1>
      </div>
      <div class="ed-img">
        <img class="bw_image" src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg">
      </div>
      <div class="education-info">
        <p> XYZ University
          <br> M.Sc
          <br> Jan 21 - Sep 22</p>
      </div>
    </div>
  </div>
</section>
...