无法使用CSS

Question

我在数字媒体上做文凭，所以我对编码很陌生，而且我已经陷入了一个特定的位。我需要集中精力，放下一些东西，但尽管我所有的搜索并尝试了我发现的所有解决方案，但似乎没有任何效果，所以现在我正在寻求帮助。我如何得到这个：

＆＃13;

＆＃13;

body {
  background-color: rgb(153, 145, 122);
}

.grey {
  background-color: black;
  color: white;
  width: 100%;
  overflow: hidden
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: right;
  border-left: 1px solid white
}

li a {
  display: block;
  padding: 8px;
  background-color: black;
}

li h1 {
  display: block;
  padding: 8px;
  background-color: black;
}

.floating {
  float: left;
  display: block;
  border-left: none
}

li a:hover {
  background-color: grey;
}

p {
  width: 50%;
  word-break: break-all;
  text-align: center
}

body {
  background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.buttonHolder {
  text-align: center
}

.button {
  width: 250px;
  height: 50px;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

＆＃13;

<header class="grey">
  <ul class="navbar">
    <li class="floating"><a>Photography Masters</a></li>
    <li><a href="#link"> Link 1</a></li>
    <li><a href="#link"> Link 2</a></li>
    <li><a href="#link"> Link 3</a></li>
    <li><a href="#link"> Link 4</a></li>
  </ul>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod.
  Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio.
</p>

<div class="buttonHolder">
  <input class=button type="submit" value="See More">
</div>

＆＃13;

＆＃13;

＆＃13;

看起来像这样：

https://i.stack.imgur.com/CyrlY.png

所有元素都必须能够根据不同的屏幕分辨率调整大小，请告诉我我做错了什么。

Answer 1

只需将margin: auto;添加到您的p元素：

p {
  width: 50%;
  margin: auto;
  word-break: break-all;
  text-align: center
}

  

花5分钟阅读以下内容将有很多帮助

     

参考：https://www.w3.org/Style/Examples/007/center.en.html

     

＆＃13;

＆＃13;

body {
  background-color: rgb(153, 145, 122);
}

.grey {
  background-color: black;
  color: white;
  width: 100%;
  overflow: hidden
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: right;
  border-left: 1px solid white
}

li a {
  display: block;
  padding: 8px;
  background-color: black;
}

li h1 {
  display: block;
  padding: 8px;
  background-color: black;
}

.floating {
  float: left;
  display: block;
  border-left: none
}

li a:hover {
  background-color: grey;
}

p {
  width: 50%;
  margin: auto;
  word-break: break-all;
  text-align: center
}

body {
  background: url("file:///C:/Users/clark/Documents/CSS/Photography Masters Website - Existing/Pm-logo.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.buttonHolder {
  text-align: center
}

.button {
  width: 250px;
  height: 50px;
  margin: 0 auto;
  padding: 0;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

＆＃13;

<header class="grey">

  <ul class="navbar">
    <li class="floating"><a>Photography Masters</a></li>
    <li><a href="#link"> Link 1</a></li>
    <li><a href="#link"> Link 2</a></li>
    <li><a href="#link"> Link 3</a></li>
    <li><a href="#link"> Link 4</a></li>
  </ul>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna erat, mollis nec rutrum in, hendrerit consectetur justo. Cras dictum facilisis nibh, eu tincidunt nisi. Vivamus facilisis vitae dolor eu sodales. Nunc imperdiet ex quis laoreet euismod.
  Duis vitae feugiat neque, eu viverra mauris. Mauris convallis sodales velit, at rhoncus odio.
</p>

<div class="buttonHolder">
  <input class=button type="submit" value="See More">
</div>

＆＃13;

＆＃13;

＆＃13;