Question

我正在为我的html / css / javascript类创建网站。我有文字和自行车图片，我希望所有文字都居中（在获得更多自行车信息之前，WWF文字只是保留的内容）。我不希望文本散布在整个页面上，而在左右各占一英寸左右。与图像相同。

是HTML / CSS / Java的新手。我去了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>

Answer 1

您忘记应用 .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>

Answer 2

尝试一下

div{
position: absolute;
top: 50%;
left: 50%;
text-transform: translate(-50%, -50%)

<div>This is an block</div>

使文本和图片以HTML / CSS为中心

2 个答案: