Question

我很难在个人网站上将内容集中在一定宽度内。我已经尝试了很多方法，比如将body设置为固定宽度，将我的包装容器设置为百分比。我在这里附上了我的网站图片，并突出显示了我希望我的内容包含在显示的图片中

here 。

我希望我的网站内容集中在突出显示的区域内，同时保持背景为屏幕的完整尺寸。

我意识到这对许多人来说可能是一个简单的问题，但我花了一整天的时间来寻找和尝试不同的方法来做到这一点无济于事。

＆＃13;

body {
  background-color: #F0f0f0;
  text-align: center;
  margin-right: 0px;
  margin-left: 0px;
}

.wrapper {
  text-align: center;
}

.topSection {
  height: 300px;
  border: solid 5px;
}

.mainAbout {
  padding-left: 50px;
  padding-right: 50px;
  vertical-align: middle;
}

.mainAbout h1 {
  font-size: 60px;
  font-family: arvo, sans-serif;
  margin-bottom: 5px;
}

#leftBrace {
  vertical-align: middle;
}

#rightBrace {
  vertical-align: middle;
}

.projects {
  height: 864px;
  border: solid 5px;
  margin-top: 2px;
  background: #0F1217;
}

.projects h2 {
  color: #e6e6e6;
  font-family: arvo, sans-serif;
  font-size: 50px;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">

<div class="wrapper">
  <!---- Wrapper Starts Here --->
  <div class="topSection" style="display:block" ;>
    <!---- Name Section Starts Here --->

    <div id="leftBrace" style="display: inline-block" ;>
      <img src="leftbrace.png">
    </div>

    <div class="mainAbout" style="display: inline-block" ;>
      <!--- Main Name and About me Section ---->

      <h1> Benjamin Yan </h1>
      <p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>

    </div>
    <!--- End mainAbout --->

    <div id="rightBrace" style="display: inline-block" ;>
      <img src="rightbrace.png">
    </div>

  </div>
  <!--- Wrapper Ends Here --->

  <div class="projects">
    <h2> Projects </h2>
  </div>

  <div class="contact">
  </div>

</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>

＆＃13;

Answer 1

您可以使用伪选择器background设置curly-braces样式，而不是使用:before and :after，因此它可以像字体样式一样工作，您可以使用transform:translate来居中您的介绍文本容器，检查以下代码。

＆＃13;

#box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #ccc;
}

#box > .cnt {
  width:50%;
  text-align: center;
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%);
}

#box:before {
  content:"{";
  font-size: 250px;
  position: absolute;
  top: 0;
  left:10%;
}

#box:after {
  content: "}";
  font-size: 250px;
  position: absolute;
  top: 0;
  right:10%;
}

＆＃13;

<div id="box">
  <div class="cnt">
    <h1> Benjamin Yan </h1>
      <p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
  </div>
</div>

＆＃13;

Answer 2

将margin: 0 auto;应用于您的内容类。这将有效。

Answer 3

您需要确保在每个inner内添加wrapper课程并定义所需的宽度。并且需要将margin: 0 auto应用于inner。我添加了demo snippet。如果你想要特定的包装器全宽，只需删除inner类就足够了，你将得到全宽。我希望它会对你有所帮助。

.wrapper { 
  height: 300px;
  width: 100%;
  background: orange;
  margin-bottom: 20px;
}
.inner {
  width: 70%;
  margin: 0 auto;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

<div class="wrapper">
  <div class="inner"></div>
</div>

保持包装容器一定比例的身体

3 个答案: