在我下面的HTML和CSS中，如何将类名为'skill-1'和'skill-2'的元素内联并居中？[已关闭]

tf7tbtn2  于 2023-10-21  发布在  其他
关注(0)|答案(2)|浏览(95)

已关闭，此问题需要details or clarity。它目前不接受回答。
**想改善这个问题吗？**通过editing this post添加详细信息并澄清问题。

上个月关门了。
这篇文章是编辑并提交审查2天前.
Improve this question
我是苏拉姆图，一个使用者。我编辑了这个问题，因为它要求改善这个问题。我已经写了一个详细的答案。请保持问题开放，以便我可以张贴我的答案
HTML和CSS代码

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

* {
    font-family: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    background-color: #ECECEC;
}


.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #FFFFFF;  
    width: 100%;
}

.nav li {
    display: inline;
    font-size: 1.0625em;
}

.nav a {
    display: inline-block;
    padding: 2% 1%;
    text-decoration: none;
    color: #000000;
    font-weight: 800;
}

.nav a:hover {
    color: #f3ca20;
    transition: 0.25s;
}

h1 {
    text-align: center;
    font-size: 3.125em;
    font-weight: 700;
    color: #000000;
}

.skills {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.skill-1 {
    background-color: #F7F7F7;
    width: 25%;
    height: 53%;
    border: none;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill-1:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: 0.35s;
    cursor: pointer;
    background-color: #FFFFFF;
}

.skill-1 img {
    height: 80%;
    width: 80%;
    margin-top: 12%;
}

.skill-2 {
    background-color: #F7F7F7;
    width: 25%;
    height: 53%;
    border: none;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill-2:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: 0.35s;
    cursor: pointer;
    background-color: #FFFFFF;
}

.skill-2 img {
    height: 80%;
    width: 80%;
    margin-top: 12%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Ari's Portfolio</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <main>
      <!-- Top Navigation Bar -->
      <ul class="nav">
        <li><a href="/home/index.html">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Projects</a></li>
        <li><a href="" class="active">Skills</a></li>
        <li><a href="">Contact</a></li>
      </ul>

      <h1>My Skills</h1>

      <!-- Skills -->
      <div class="skills">
        <!--Skill 1 -->
        <div class="skill-1">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg">
        </div>
        <div class="skill-2">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg">
      </div>
    </div>  
    </main>
  </body>
</html>

你能帮帮我吗？我已经试了很多次了，什么都不管用。看起来像Web Page。

css

2条答案

按热度按时间
lo8azlld

lo8azlld1#

我建议使用Flexbox来显示技能。

.skills {
  display: flex;
  justify-content: space-evenly;
}

.skill {
  width: 25%;
  padding: 1em;
}

.skill img {
  width: 100%;
}
* {
  font-family: 'Montserrat', sans-serif;
}

body {
  margin: 0;
  background-color: #ECECEC;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #FFFFFF;  
  width: 100%;
}

.nav li {
  display: inline;
  font-size: 1.0625em;
}

.nav a {
  display: inline-block;
  padding: 2% 1%;
  text-decoration: none;
  color: #000000;
  font-weight: 800;
}

.nav a:hover {
  color: #f3ca20;
  transition: 0.25s;
}

h1 {
  text-align: center;
  font-size: 3.125em;
  font-weight: 700;
  color: #000000;
}

.skills {
  display: flex;
  justify-content: space-evenly;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.35s;
  cursor: pointer;
  background-color: #FFFFFF;
}

.skill img {
  width: 100%;
}
<main>
  <!-- Top Navigation Bar -->
  <ul class="nav">
    <li><a href="/home/index.html">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="" class="active">Skills</a></li>
    <li><a href="">Contact</a></li>
  </ul>

  <h1>My Skills</h1>

  <div class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </div>  
</main>

如果你想在可用的视口空间中垂直居中技能，这可以通过更多的声明来实现。

html, body, main {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
}

.skills {
  margin-block: auto;
}
* {
  font-family: 'Montserrat', sans-serif;
}

body {
  margin: 0;
  background-color: #ECECEC;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #FFFFFF;  
  width: 100%;
}

.nav li {
  display: inline;
  font-size: 1.0625em;
}

.nav a {
  display: inline-block;
  padding: 2% 1%;
  text-decoration: none;
  color: #000000;
  font-weight: 800;
}

.nav a:hover {
  color: #f3ca20;
  transition: 0.25s;
}

h1 {
  text-align: center;
  font-size: 3.125em;
  font-weight: 700;
  color: #000000;
}

html, body, main {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
}

.skills {
  display: flex;
  justify-content: space-evenly;
  margin-block: auto;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.35s;
  cursor: pointer;
  background-color: #FFFFFF;
}

.skill img {
  width: 100%;
}
<main>
  <!-- Top Navigation Bar -->
  <ul class="nav">
    <li><a href="/home/index.html">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="" class="active">Skills</a></li>
    <li><a href="">Contact</a></li>
  </ul>

  <h1>My Skills</h1>

  <div class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </div>  
</main>

我还建议你学习Document and website structure。导航栏应该与主内容分开，因此不在<main>元素内。导航栏也应该在<nav>元素中。我还建议使用Flexbox作为导航项，而不是将显示改为内联。

* {
  font-family: 'Montserrat', sans-serif;
}

html,
body,
main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  margin: 0;
  background-color: #ECECEC;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 1em 0;
  background-color: #FFFFFF;  
}

nav a {
  text-decoration: none;
  color: #000000;
  font-weight: 800;
}

nav a:hover {
  color: #f3ca20;
  transition: 0.25s;
}

h1 {
  text-align: center;
  font-size: 3.125em;
  font-weight: 700;
  color: #000000;
}

.skills {
  display: flex;
  justify-content: space-evenly;
  margin-block: auto;
}

.skill {
  width: 25%;
  padding: 1em;
  background-color: #F7F7F7;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.skill:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: 0.35s;
  cursor: pointer;
  background-color: #FFFFFF;
}

.skill img {
  width: 100%;
}
<nav>
  <!-- Top Navigation Bar -->
  <ul>
    <li><a href="/home/index.html">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="" class="active">Skills</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>My Skills</h1>

  <section class="skills">
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="HTML5">
    </div>
    <div class="skill">
      <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg" alt="CSS3">
    </div>
  </section>  
</main>
赞(0）分享  回复(0）举报  2023-10-21
kognpnkq

kognpnkq2#

您可以使用flexbox来居中对齐这些div。试试这个-

.skills {
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com