时间戳

首页 > 解决方案 > 以 HTML/CSS 为中心制作文本和图片

javascript - 以 HTML/CSS 为中心制作文本和图片

问题描述

我正在为我的 html/css/javascript 类创建一个网站。我有自行车的文字和图片，我希望它们都居中（在我获得更多自行车信息之前，WWF 的文字只是一些东西）。我不希望文本在整个页面中传播，而是在左右一英寸左右。与图像相同。

我是 HTML/CSS/Javascript 的新手。我去了w3教程，但找不到解决方案。

非常感谢你们，我非常感谢你们的工作。

这是我当前的代码：

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
body {
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  background: #8E8E8E
}

.content {
  font-size: 17px;
  text-align: center;
}

footer {
  background-color: #975026;
  padding: 10px;
  text-align: center;
  color: #1BEF0A;
}

nav {
  text-align: center;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  margin: 0 auto;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #791519;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  margin: 0 auto;
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<header>
  <a href="home.html">
    <img src="vmoto.gif" alt="vmoto" width="1050" height="163" align="middle">
  </a>
</header>


<nav>
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="index.html">Mountain Bike</a></li>
    <li><a href="index.html">Road Bike</a></li>
    <li><a href="index.html">BMX</a></li>
    <li><a href="index.html">About</a></li>
  </ul>
</nav>

<section>
  <img src="bicycle-bike-daylight-100582 (1).jpg" alt bicycle width="600" height="400" align="middle"></section>


<div class="content">
  <h3>Interesting Stuff</h3>
  <p>stuff thats really interesting</p>

  <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
  </section>

  <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
  </section>

  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<footer>
  <p>Contact Us! 123 Main St. Anywhere, NC 99999* | Phone: (919) 123-4567 Fax: (917) 123-8901 | Twitter and Facebook</p>
</footer>

标签： javascripthtmlcss

解决方案

你忘了申请.content类。

应该：

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href="styles.css">
    <style>
        body {
            margin: 0 auto;
            font-family: Arial, Helvetica, sans-serif;
            background: #8E8E8E
        }

        .content {
            font-size: 17px;
            text-align: center;
        }

        footer {
            background-color: #975026;
            padding: 10px;
            text-align: center;
            color: #1BEF0A;

        }
    </style>
</head>
<header>
    <div class="content">
        <a href="home.html">
            <img src="vmoto.gif"
                alt="vmoto"
                width="1050"
                height="163">
        </a>
    </div>

</header>

<body>

推荐阅读