Question

我的问题是h2元素（简介和技能）如何不居中。如果你能帮助我集中我的<p>元素，这也会有所帮助。另一件事是我不理解为什么即使<p>元素看起来对齐相同的数量，它们也会对齐不同的数量（p＃first和p＃second）。

header {
  background: #062554;
  color: white;
  padding-bottom: 10px;
  padding-top: 10px;
  text-align: center;
}

header h1 span {
  display: inline-block;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border: white solid 10px;
  border-radius: 10px;
}

h3 {
  font-size: 40px;
}

h1 {
  font-size: 90px;
}

ul {
  font-size: 25px;
}

ul#menu li {
  display: inline;
}

nav a,
nav a:visited {
  color: #fff;
}

nav a.selected,
nav a:hover {
  color: #f4f4f4;
}

p {
  font-size: 20px;
  font-family: Verdana;
  background: #062554;
  color: white;
  border: black hidden 10px;
  border-radius: 10px;
  border-width: 10px;
}

p#first {
  width: 690px;
  text-align: center;
  justify-content: center;
}

.heading-main {
  padding-top: 20px;
  position: relative;
}

.headertekst {
  text-align: center;
}

p#second {
  width: 690px;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
}

#bio-text {
  margin: 0 auto;
}

<html>
<header>
  <div class="main-header">
    <h1><span>Kristofer Gaudel</span></h1>
    <h3>Website Developer and Entrepeneur</h3>
  </div>
  <nav>
    <ul id="menu">
      <li><a href="#bio">Introduction</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
    </ul>
  </nav>
</header>

<div class="wrapper">
  <div class="main-section bio row" id="bio">
    <div id="bio-text">
      <h2 class="headertekst">Introduction</h2>
      <p id="first"> I am a 14 year old high school enrolled at SATEC @ W.A. Porter CI. My long term goal is to become a professional I am seeking Volunteering Oppurtunities that can be used towards my Community Hours as well as internships utilizing my skills. I am
        located in the Woodbine area and can be contacted through my Email, Twitter and Github.</p>
    </div>
  </div>
  <div class="main-section" id="skills">
    <h2 class="headertekst">Skills</h2>
    <p id="second">My main tools for web development are HTML and CSS (Intermediate level), Javascript (Intermediate), BootStrap 4(Novice) along with Notepad and Brackets as code editors.</p>

</html>

Answer 1

你可以使用css：

h1, p {text-align:center;}

或将h1和p标签放在中心标记<center><p></p></center> <center><h1></h1></center>

中

Answer 2

text-align: center的问题在于它在元素本身的边界内工作。在您的示例中，元素首先不在页面中居中，因此text-align: center不起作用。我强烈建议您使用Chrome开发工具，以了解页面中元素的布局方式。

在任何情况下，为了解决您的问题，我使用margin: 0 auto以便在页面中居中元素。另外，我注意到您使用了left / right和相对定位以使元素居中，我不建议这样做......

请在此处查看最终解决方案：https://codepen.io/anon/pen/PKbvLY。

Answer 3

.headertekst {
width:650px;
position: relative;
text-align:center;
right:-691px;
}

段落的位置在右侧，标题宽度为100％，因此标题不在段落对齐中心

如何将我的h2元素与我的p元素

3 个答案: