Как центрировать элемент статьи на веб-сайте?

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

Как центрировать элемент статьи на веб-сайте?

Ссылка на CodePen

document.getElementsByTagName("h1")[0].style.fontSize = "80px";
/* 
   Murfreesboro Regional Soccer League style sheet 
   Filename: styles.css

   Author:   Jerry Lopez
   Date:     10/25/2018
   HTML5 and CSS3 Illustrated Unit I, Independent Challenge 2
 */


/* reset styles */

html {
  font-size: 14px;
}

a,
article,
body,
div,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
section,
ul {
  border: 0;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
}

ul {
  list-style-type: none;
}


/* body and page container */

body {
  background: green;
  background: url("images/grass.jpg");
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  margin: 0 auto;
  position: relative;
  background-color: rgb(140, 198, 63);
}

p {
  font-size: 1.2em;
}


/* skip navigation link */

p.skipnavigation a {
  position: absolute;
  left: -10000px;
}

p.skipnavigation a:focus {
  left: 1em;
  top: 1em;
  color: black;
  background: ivory;
  z-index: 2;
}


/* header section */

header {
  width: 76%;
  padding: 1em 2% 0.5em;
  text-align: center;
  background-color: rgb(140, 198, 63);
  overflow: auto;
  float: left;
}

h1 {
  font-size: 2.4em;
  line-height: 1.4em;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-shadow: 0 0 5px white;
}

header div {
  max-width: 224px;
  float: left;
  display: none;
}


/* site navigation */

nav.sitenavigation {
  padding: 2% 2% 2%;
  width: 16%;
  float: right;
  text-align: right;
}

nav.sitenavigation ul {
  text-align: left;
  display: none;
  position: absolute;
  right: 2%;
}

nav.sitenavigation li {
  font-size: 1.2em;
}

nav.sitenavigation a {
  padding: 0.2em;
  display: block;
  background-color: #c8f098;
  font-weight: bold;
}

nav.sitenavigation a:link {
  color: black;
  text-decoration: none;
}

nav.sitenavigation a:visited {
  color: #888;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
  color: black;
  background-color: white;
}

nav.sitenavigation a:active {
  position: relative;
  top: 1px;
  left: 1px;
}


/* main content */

article {
  width: 100%;
  font-size: 1.4em;
  line-height: 1.6em;
  padding: 1em 0;
  background-color: white;
  vertical-align: center;
}

article p {
  margin-top: 1em;
  padding: 0 3%;
  clear: both;
}

article figure {
  max-width: 100%;
  float: left;
}


/* sidebar */

aside {
  width: 24%;
  padding: 1em 3%;
  float: right;
  display: none;
}

aside h2 {
  margin: 0 0 0.4em;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.6em;
}

aside p {
  margin: 0 0 1em 1em;
  padding-left: 7%;
}

aside p.accent {
  margin: 0;
  font-weight: bold;
}


/* footer section */

footer {
  padding: 1em;
  clear: both;
  color: white;
  background-color: black;
  text-align: right;
}


/* small screen/tablet styles */

@media screen and (min-width: 500px) {
  aside {
    display: block;
  }
  article {
    width: 70%;
    clear: both;
    font-size: 2em;
    float: left;
  }
}


/* standard screen styles */

@media screen and (min-width: 760px) {
  body {
    padding: 1em;
  }
  .container {
    border-radius: 2em;
    background-color: #c8f098;
  }
  header {
    width: auto;
    float: none;
    border-radius: 2em 2em 0 0;
  }
  header div {
    display: block;
  }
  nav.sitenavigation {
    padding: 2%;
    width: 21%;
    float: left;
  }
  nav.sitenavigation img {
    display: none;
  }
  nav.sitenavigation ul {
    display: block;
    position: static;
    float: left;
  }
  nav.sitenavigation a {
    margin-bottom: 0.6em;
  }
  article {
    width: 50%;
  }
  aside {
    width: 19%;
  }
  footer {
    border-radius: 0 0 2em 2em;
  }
}


/* print styles */

@media print {
  article {
    position: static;
    margin: 0 auto;
  }
  aside,
  body,
  .container,
  footer,
  header {
    color: #000;
    background: #fff;
  }
  body {
    max-width: 100%;
  }
  nav {
    display: none;
  }
}

@page {
  margin: 0.75in;
}
<!DOCTYPE html>
<html lang = "en">

<head>
  <title>Murfreesboro Regional Soccer League</title>
  <!--
         Murfreesboro Regional Soccer League main web page
         Filename: index.html
      
         Author:   Jerry Lopez
         Date:     10/25/2018
         HTML5 and CSS3 Illustrated Unit I, Independent Challenge 2
      -->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <script src = "modernizr.custom.40753.js"></script>
  <link rel = "stylesheet" href = "styles.css">
  <link rel = "shortcut icon" href = "images/favicon.ico">
  <link rel = "apple-touch-icon" href = "images/apple-touch-icon.png">
  <link rel = "icon" sizes = "192x192" href = "images/android.png">
</head>

<body>
  <div class = "container">
    <p class = "skipnavigation"><a href = "#contentstart">Skip navigation</a></p>
    <header>
      <div>
        <img src = "images/mrsl.png" width = "224" height = "105" alt = "">
      </div>
      <h1>Murfreesboro Regional Soccer League</h1>
    </header>
    <nav class = "sitenavigation">
      <div class = "navigation-menu-button">
        <img src = "images/menu.png" width = "60" height = "60" alt = "Show navigation">
      </div>
      <ul>
        <li><a href = "index.html">Home</a></li>
        <li><a href = "started.html">Getting Started</a></li>
        <li><a href = "schedule.html">Schedules</a></li>
        <li><a href = "events.html">Events</a></li>
      </ul>
    </nav>
    <article>
      <p>Get exercise, have fun, and build your soccer skills playing with us.</p>
      <figure>
        <img src = "images/kick.jpg" width = "400" height = "267" alt = "a leg in a shoe with cleats and a high blue sock kicking a soccer ball">
      </figure>
      <p>Teams for beginners as well as experienced players.</p>
    </article>
    <aside>
      <h2 id = "contentstart">Upcoming Events</h2>
      <p class = "accent">4/23</p>
      <p>Open practice</p>
      <p class = "accent">4/25</p>
      <p>Blue/Green scrimmage</p>
      <p class = "accent">5/1</p>
      <p>Kids workshop (5-13)</p>
    </aside>
    <footer>
      <p>c/o Davies Sporting Goods</p>
      <p>418 N. Sartoris St.</p>
      <p>Murfreesboro, TN 37130</p>
      <p>(615) 555-2255</p>
    </footer>
  </div>
  <script src = "script.js"></script>
</body>

</html>

разместите свой код в текстовом формате ... не в картинках. воссоздать что-то вроде codepen

NooBskie 26.10.2018 03:54

Я вставил код в кодовую ручку и, предполагая поделиться им, просто вставил ссылку. Единственная проблема в том, что изображения не появляются, и я надеюсь, что это не проблема.

Jerry Lopez 26.10.2018 04:16
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
56
2

Ответы 2

Удалите clear: both; из article в вашем CSS (строка 174 в CodePen). Это заставляет контент переходить на новую строку.

У вашего article есть поплавок, который заставляет его оставаться влево. Попробуйте отключить float и использовать встроенный блок, чтобы ваш css article стал:

article {
    width: 50%;
    display: inline-block;
    float: none;
}

Посмотрите, как это работает на https://codepen.io/anon/pen/gBZNMJ

Другие вопросы по теме