Question

所以我正在制作技能栏，我想用于我的网站。但像html，css等文字并没有与我的酒吧对齐。（这些不是我真正的％我是html和css的初学者）随意改变你认为必要的任何东西。下面是我的html和css。

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-left: auto;
  margin-right: auto;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  margin: 0.1%;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

<div class="skills">
  <h1>Skills</h1>
  <div class="skill-box">
    <p>HTML</p>
    <div class="container-skill">
      <div class="skill html">90%</div>
    </div>

    <p>CSS</p>
    <div class="container-skill">
      <div class="skill css">80%</div>
    </div>

    <p>JavaScript</p>
    <div class="container-skill">
      <div class="skill js">65%</div>
    </div>

    <p>PHP</p>
    <div class="container-skill">
      <div class="skill php">60%</div>
    </div>

  </div>

</div>

随意更改您认为必要的任何内容。这只是额外的文字。

Answer 1

您可以使用inline-block 显示 对其进行排行，并使用{对齐垂直 {1}} - 将此添加到您的CSS：

vertical-align: middle

见下面的演示：

＆＃13;

.skill-box > * {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  margin: 0.1%;
}

＆＃13;

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-left: auto;
  margin-right: auto;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  margin: 0.1%;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

.skill-box > * {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  margin: 0.1%;
}

＆＃13;

编辑：如果您希望将它们置于另一个之下，只需将<div class="skills"> <h1>Skills</h1> <div class="skill-box"> <p>HTML</p> <div class="container-skill"> <div class="skill html">90%</div> </div> <p>CSS</p> <div class="container-skill"> <div class="skill css">80%</div> </div> <p>JavaScript</p> <div class="container-skill"> <div class="skill js">65%</div> </div> <p>PHP</p> <div class="container-skill"> <div class="skill php">60%</div> </div> </div> </div>从margin-left: auto移至将移至左侧或只需将container-skill添加到text-align: center即可将所有内容添加到中心 - 请参阅下面的演示：

＆＃13;

.skill-box p

＆＃13;

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-right: auto;
  margin-left: auto;
}
.skill-box p { /* ADDED THIS */
  text-align: center;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  margin: 0.1%;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

Answer 2

您可以将段落的宽度设置为40％以匹配div，并将边距更改为也匹配：

＆＃13;

.skills h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Raleway', sans-serif;
}

.container-skill {
  box-sizing: border-box;
  width: 40%;
  background-color: #ddd;
  margin-left: auto;
  margin-right: auto;
}

.skill {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.skills p {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.html {
  width: 90%;
  background-color: #4CAF50;
}

.css {
  width: 80%;
  background-color: #2196F3;
}

.js {
  width: 65%;
  background-color: #f44336;
}

.php {
  width: 60%;
  background-color: #808080;
}

.skill-box {
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="skills">
  <h1>Skills</h1>
  <div class="skill-box">
    <p>HTML</p>
    <div class="container-skill">
      <div class="skill html">90%</div>
    </div>
    <p>CSS</p>
    <div class="container-skill">
      <div class="skill css">80%</div>
    </div>
    <p>JavaScript</p>
    <div class="container-skill">
      <div class="skill js">65%</div>
    </div>
    <p>PHP</p>
    <div class="container-skill">
      <div class="skill php">60%</div>
    </div>
  </div>
</div>

＆＃13;

如何让我的pargraph与我的div容器对齐？

2 个答案: