我可以得到我的lt; img＆gt;标签我的网格中心

发布于 2025-01-17 19:26:40 字数 9640 浏览 1 评论 0原文

我正在尝试从头开始编写我的第一个网站，但我发现自己在最后一天陷入了这个问题。我正在尝试将徽标置于移动视图的中心。我将它们正确放置在我的@media标签中，并且它们显示在网格内，但是经过无数次尝试，我无法让它们在网格列内居中。如果我的代码有任何混乱，我深表歉意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
    <title>Developer Portfolio</title>
</head>
<body>
    <nav>
    <div class="logo">
        <h3>
            <a href="/">Johnathan Specter</a>
        </h3>
    </div>
        <div class="nav-list">
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Chats</a></li>
                <li><a href="#">Awards</a></li>
                <li><a href="#">About</a></li>
                <button class="nav-button">Get in touch</button>
            </ul>
        </div>
    </nav>
    <div class="mob-menu">
        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
        <ul class="mobile-menu">
            <li><a href="#">Articles</a></li>
            <li><a href="#">Chats</a></li>
            <li><a href="#">Awards</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Get in touch</a></li>
        </ul>
    </div>
    <section class="top">
        <div class="top-container">
            <div class="column-left">
                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
            </div>
        </div>
    </section>
    <section class="logos">
        <div class="company-logos">
            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
        </div>
    </section>
    <section>
        <div class="previews">
            <div class="spense">
                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
                <h2 class="spense-heading">Spense.com</h2>
                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
            </div>
            <div class="yelp">
                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
                <h2 class="yelp-heading">YelpCamp.com</h2>
                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
            </div>
        </div>
    </section>
    <section>
        <div class="blurb">
            <div class="blurb1">
                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
            </div>
            <div class="blurb2">
                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
                <p>A quote I live by perfectly illustrates what I mean.</p>
                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
            </div>
        </div>
    </section>
    <section>
        <div class="interested">
            <div class="interested1">
                <h1>Intersted in working with me?</h1>
                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
                <button class="git-button">Get in touch</button>
            </div>
            <div class="interested2">
            </div>
        </div>
    </section>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

nav {
    display: flex;
    flex-wrap: wrap;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Prata';
    color: #ffffff;
    font-size: 110%;
}

.logo a {
    text-decoration: none;
    font-family: 'Prata';
    color: #ffffff;
}

.logo:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.nav-list {
    flex: 1;
    text-align: center;
}

.nav-list li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-list li:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.nav-list li a {
    color: #939495;
    text-decoration: none;
    font-family: 'Inter';
}

.nav-button {
    background-color: #fbe850;
    color: #000000;
    float: right;
    padding: 15px 30px;
    font-family: 'Prata';
}

.nav-button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.company-logos {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    padding: 2% 6%;
    justify-content: space-between;
}

h1 {
    font-family: 'Prata';
    color: #ffffff;
}

p {
    font-family: 'Inter';
    color: #939495;
}

.top-container {
    display: flex;
    width: 50%;
    padding: 2% 6%;
}

.sub-heading {
    font-size: 250%;
}

.previews {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
}

.previews > * {
    flex-basis: 100%;
}

.spense-heading {
    font-family: 'Prata';
    color: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.spense p {
    color: #939495;
}

.spense-img {
    height: auto;
    max-width: 100%;
}

.yelp-img {
    height: auto;
    max-width: 100%;
}

.yelp-heading {
    font-family: 'Prata';
    color: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.yelp p {
    color: #939495;
}

.blurb {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
    background-color: #2e3038;
}

.blurb1 h1 {
    margin-bottom: 1rem;
    color: #ffffff;
}

.blurb1 p {
    margin-bottom: 1rem;
    color: #939495;
}

.blurb2 p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #939495;
}

.interested {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
}

.interested h1 {
    margin-bottom: 1rem;
}

.interested1 p {
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.interested1 {
    flex-basis: 50%;
}

.git-button {
    background-color: #fbe850;
    color: #000000;
    padding: 15px 30px;
    font-family: 'Prata';
}

.git-button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;
}

.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 500px) {
    .top-container {
        width: 100%;
        margin-bottom: 3rem;
    }

    .previews {
        display: block;
    }

    .blurb {
        display: block;
    }

    .blurb1 {
        margin-bottom: 3rem;
    }

    .interested {
        display: block;
        max-width: 80%;
    }
}

@media (max-width: 750px) {
    .nav-list {
        display: none;
    }

    .hamburger-icon {
        display:inline-block
    }
}

@media (max-width: 800px) {
    .company-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }
}

我已经进行了大量的谷歌搜索，根据我的理解，这不应该是一个困难的解决方案，我只能假设我有一些东西覆盖了我的代码，阻止我将图像居中。

原文

I'm attempting to code my first website from scratch and I have found myself stuck on this problem for the last day. I am trying to center the logos for my mobile view. I have them placed correctly in my @media tag and they are displaying inside the grid however after countless tries I cannot get them to center inside of there grid columns. I do apologise if any of my code is messy.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Prata">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
    <title>Developer Portfolio</title>
</head>
<body>
    <nav>
    <div class="logo">
        <h3>
            <a href="/">Johnathan Specter</a>
        </h3>
    </div>
        <div class="nav-list">
            <ul>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Chats</a></li>
                <li><a href="#">Awards</a></li>
                <li><a href="#">About</a></li>
                <button class="nav-button">Get in touch</button>
            </ul>
        </div>
    </nav>
    <div class="mob-menu">
        <img src="/Assets/Hamburger Menu.svg" class="hamburger-icon">
        <ul class="mobile-menu">
            <li><a href="#">Articles</a></li>
            <li><a href="#">Chats</a></li>
            <li><a href="#">Awards</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Get in touch</a></li>
        </ul>
    </div>
    <section class="top">
        <div class="top-container">
            <div class="column-left">
                <h1 class="sub-heading">Helping companies build better, scalable software.</h1>
                <p>Award-winning web developer and author with over 15+ years of working experience with Fortune 500 companies like Apple, Google, Facebook, and more.</p>
            </div>
        </div>
    </section>
    <section class="logos">
        <div class="company-logos">
            <img src="/Assets/Logos/Walmart.svg" alt="Walmart logo" class="walmart-logo">
            <img src="/Assets/Logos/JP Morgan.svg" alt="JP Morgan logo">
            <img src="/Assets/Logos/Visa.svg" alt="Visa logo">
            <img src="/Assets/Logos/Tinder.svg" alt="Tinder logo">
            <img src="/Assets/Logos/Samsung.svg" alt="Samsung logo">
            <img src="/Assets/Logos/Verizon.svg" alt="Verizon logo">
        </div>
    </section>
    <section>
        <div class="previews">
            <div class="spense">
                <img src="/Assets/Spense.png" alt="preview of spense.com website" class="spense-img">
                <h2 class="spense-heading">Spense.com</h2>
                <p>Rethinking the way writers get paid, an open-source platform designed to help writers focus more on writing, and less on when and how they'll get paid. Project in collaboration with Codewell.cc</p>
            </div>
            <div class="yelp">
                <img src="/Assets/YelpCamp.png" alt="preview of yelpcamp.com website" class="yelp-img">
                <h2 class="yelp-heading">YelpCamp.com</h2>
                <p>Allowing backpack travelers to perfectly plan their trip through and open-source platform similar to TripAdvisor. With over 1m MAU, YelpCamp has been the crowd's favourite in 2021.</p>
            </div>
        </div>
    </section>
    <section>
        <div class="blurb">
            <div class="blurb1">
                <h1 class="blurb1-heading">A co-founder at one of the world's largest communities.</h1>
                <p>The combined experience I have working at the top Fortune 500 companies has allowed me to developer a skillset that helps me in not just development, but in every aspect of any business.</p>
                <p>I'm proud to announce that I am now working at one of the world's largest communities teaching young minds about how to sell yourself as a developer and open them to a whole new world of opportunities.</p>
            </div>
            <div class="blurb2">
                <p>As a developer, you have everything available to you and all that's holding you back is yourself.</p>
                <p>A quote I live by perfectly illustrates what I mean.</p>
                <p>"How big would you dream, if you knew you wouldn't fail?" You've already gone through the hardest parts being a developer, it's time to elevate your skills and become a leader, in something you're passionate about.</p>
                <p>I'm happy to chat over coffee some time about how I can help your company.</p>
            </div>
        </div>
    </section>
    <section>
        <div class="interested">
            <div class="interested1">
                <h1>Intersted in working with me?</h1>
                <p>I'm active on all social media platforms listed below, but you, can also me an email and I will get back to you within 24-48, hours.</p>
                <button class="git-button">Get in touch</button>
            </div>
            <div class="interested2">
            </div>
        </div>
    </section>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

nav {
    display: flex;
    flex-wrap: wrap;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: 'Prata';
    color: #ffffff;
    font-size: 110%;
}

.logo a {
    text-decoration: none;
    font-family: 'Prata';
    color: #ffffff;
}

.logo:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.nav-list {
    flex: 1;
    text-align: center;
}

.nav-list li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-list li:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.nav-list li a {
    color: #939495;
    text-decoration: none;
    font-family: 'Inter';
}

.nav-button {
    background-color: #fbe850;
    color: #000000;
    float: right;
    padding: 15px 30px;
    font-family: 'Prata';
}

.nav-button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.company-logos {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    padding: 2% 6%;
    justify-content: space-between;
}

h1 {
    font-family: 'Prata';
    color: #ffffff;
}

p {
    font-family: 'Inter';
    color: #939495;
}

.top-container {
    display: flex;
    width: 50%;
    padding: 2% 6%;
}

.sub-heading {
    font-size: 250%;
}

.previews {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
}

.previews > * {
    flex-basis: 100%;
}

.spense-heading {
    font-family: 'Prata';
    color: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.spense p {
    color: #939495;
}

.spense-img {
    height: auto;
    max-width: 100%;
}

.yelp-img {
    height: auto;
    max-width: 100%;
}

.yelp-heading {
    font-family: 'Prata';
    color: #ffffff;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.yelp p {
    color: #939495;
}

.blurb {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
    background-color: #2e3038;
}

.blurb1 h1 {
    margin-bottom: 1rem;
    color: #ffffff;
}

.blurb1 p {
    margin-bottom: 1rem;
    color: #939495;
}

.blurb2 p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #939495;
}

.interested {
    display: flex;
    padding: 2% 6%;
    gap: 1rem;
}

.interested h1 {
    margin-bottom: 1rem;
}

.interested1 p {
    margin-bottom: 1rem;
    margin-right: 1rem;
}

.interested1 {
    flex-basis: 50%;
}

.git-button {
    background-color: #fbe850;
    color: #000000;
    padding: 15px 30px;
    font-family: 'Prata';
}

.git-button:hover {
    transform: scale(1.1);
    transition: 0.3s;
}

.hamburger-icon {
    margin: auto 0;
    display: none;
    cursor: pointer;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;
}

.open .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 500px) {
    .top-container {
        width: 100%;
        margin-bottom: 3rem;
    }

    .previews {
        display: block;
    }

    .blurb {
        display: block;
    }

    .blurb1 {
        margin-bottom: 3rem;
    }

    .interested {
        display: block;
        max-width: 80%;
    }
}

@media (max-width: 750px) {
    .nav-list {
        display: none;
    }

    .hamburger-icon {
        display:inline-block
    }
}

@media (max-width: 800px) {
    .company-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }
}

I have done plenty of googling and from my understanding this shouldn't be a hard fix, I can only assume I have something overriding my code stopping me from centering my images.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

第几種人 2025-01-24 19:26:40

.company-logos img {
  justify-self: center;
}

会做的。

另一种选择：

.company-logos img {
  margin: 0 auto;
}

注意：您可能没有意识到这一点，但您在系统上发布了除图像之外的所有内容，因为它们是相对的。您应该用一些随机图像网址或一些图像占位符替换 src（例如：https://via.placeholder.com/150）

工作示例：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

.company-logos {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding: 2% 6%;
  justify-content: space-between;
}

@media(max-width: 1050px) {
  .company-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 800px) {
  .company-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.company-logos img {
  justify-self: center;
}

    <section class="logos">
        <div class="company-logos">
            <img src="https://via.placeholder.com/150" alt="Walmart logo" class="walmart-logo">
            <img src="https://via.placeholder.com/150" alt="JP Morgan logo">
            <img src="https://via.placeholder.com/150" alt="Visa logo">
            <img src="https://via.placeholder.com/150" alt="Tinder logo">
            <img src="https://via.placeholder.com/150" alt="Samsung logo">
            <img src="https://via.placeholder.com/150" alt="Verizon logo">
        </div>
    </section>

注意：我删除了与所提出的问题无关的所有代码。

.company-logos img {
  justify-self: center;
}

will do it.

Another option:

.company-logos img {
  margin: 0 auto;
}

Note: you might not realise it, but you posted everything except the images, because they're relative, on your system. You should have replaced the src's with some random image urls or some image placeholders (e.g: https://via.placeholder.com/150)

Working example:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

.company-logos {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding: 2% 6%;
  justify-content: space-between;
}

@media(max-width: 1050px) {
  .company-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 800px) {
  .company-logos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.company-logos img {
  justify-self: center;
}

    <section class="logos">
        <div class="company-logos">
            <img src="https://via.placeholder.com/150" alt="Walmart logo" class="walmart-logo">
            <img src="https://via.placeholder.com/150" alt="JP Morgan logo">
            <img src="https://via.placeholder.com/150" alt="Visa logo">
            <img src="https://via.placeholder.com/150" alt="Tinder logo">
            <img src="https://via.placeholder.com/150" alt="Samsung logo">
            <img src="https://via.placeholder.com/150" alt="Verizon logo">
        </div>
    </section>

Note: I removed all code irrelevant for question being asked.

回复收藏 0 原文

~没有更多了~