学生学习者，如何将图像与文本对齐？

问题描述 投票：0回答：1

我正在为一个班级建立一个网站，我正在尝试创建一个导航栏。我希望它看起来像这样，在 Adobe XD 中创建。我希望草莓徽标与文本对齐，并将所有这些项目对齐在一起。我认为我非常接近期望的结果，但由于某种原因，徽标看起来像那样。

desired look

What I have instead

HTML

 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://use.typekit.net/fup3yph.css">
        <title>The Strawberry Chateau</title>
    </head>
    <body>
<!--Navigation-->
<div class="desktop-nav">
    <nav>
        <ul>
            <a href="#"><img src="img/logo-pink.svg" alt="logo" class="logo"></a>
            <li><a href="#">Home</a></li>
            <li><a href="#">Merch</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#"><img src="img/search.svg" alt="" class="search-icon"></a></li>
            <li><a href="#">Order Now!</a></li>
        </ul>
    </nav>
</div>

<div class="mobile-nav">
    <nav>
        <a href="#">
            <img src="img/logo-pink.svg" alt="logo">
        </a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Merch</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#"><img src="img/search.svg" alt=""></a></li>
            <li><a href="#">Order Now!</a></li>
        </ul>
    </nav>
</div>
      
<!--Hero-->
        <img src="/img/hero.png" alt="" class="hero">

<!--Welcome + Three Buttons-->
        <h1>Welcome to the chateau!</h1>
        <p>We hope you enjoy your stay!</p>
        <div class="three-buttons">
            <div class="order-pickup">
                <img src="/img/order-pickup-button.png" alt="">
                <a href="#" class="three-buttons-text">Order Pick Up</a>
            </div>
            <div class="order-delivery">
                <img src="/img/ delivery-button.png" alt="">
                <a href="#" class="three-buttons-text">Order Delivery</a>
            </div>
            <div class="special-deals">
                <img src="/img/rewards-button.png" alt="">
                <a href="#" class="three-buttons-text">Special Deals</a>
            </div>
        </div>

<!--About Section-->

<div class="about">
    <div class="left-about">
        <h1>Who are we?</h1>
        <p>Nestled in the heart of City, State, The Strawberry Chateau is committed to delivering quality and artisan coffees and treats.  With a specialty in strawberries, The Chateau strives to ensure you feel right at home. We are more than just a coffee shop; we are also a community of coffee and strawberry aficionados.</p>
    </div>
    <div class="about-person-img">
        <img src="img/barista.png" alt="">
    </div>
</div>

<!--Spring Savings and Chateau Events-->

<!--Spring-->

<div class="sale-event-box">
    <img src="img/spring-savings.png" alt="">
    <div class="sale-event-right-content">
        <h1>Spring Savings</h1>
        <p>Have a cup of strawberry infused coffee, on us.</p>
        <p>Available once a week for the entire Spring season.</p>
        <a href="#" class="square-button">ORDER ONLINE</a>
    </div>
</div>

<!--Event-->

<div class="sale-event-box">
    <div class="sale-event-img"><img src="img/coffee-events.png" alt=""></div>
    <div class="sale-event-right-content">
        <h1>Chateau Events</h1>
        <p>Enjoy live music and other fun activities during your stay at the Chateau!</p>        
        <a href="#" class="square-button">VIEW SCHEDULE</a>
    </div>
</div>

<!--Order + Card Design-->
        <h1>Order a Treat</h1>
        <a href="#" id="drinks-selected" class="sort-treats">Drinks</a>
        <a href="#" class="sort-treats">Bakery</a>
        <a href="#" class="sort-treats">Sale</a>
        <main>
            <!--Strawberry Latte Card-->
            <div class="card"><img src="img/strawberry-latte.png" alt=""></div>
            <p class="card-title">Strawberry Latte</p>
            <p class="card-desc">Indulge in a ltte made with velvety steamed milk and infused organic strawberries.</p>
            <div class="stats">
                <p>200 calories</p>
                <p class="price">$3.99</p>
            </div>
            <div class="qty">
                <p>-</p>
                <p>1</p>
                <p>+</p>
            </div>
            <a href="" class="card-btn">ADD TO CART</a>
            <!--Berry Blast Frappe-->
            <div class="card"><img src="img/berry-blast-frappe.png" alt=""></div>
            <p class="card-title">Berry Blast Frappe</p>
            <p class="card-desc">Ripe strawberries and espresso whipped together to create a drink bursting with flavor.</p>
            <div class="stats">
                <p>200 calories</p>
                <p class="price">$2.99</p>
            </div>
            <div class="qty">
                <p>-</p>
                <p>1</p>
                <p>+</p>
            </div>
            <a href="" class="card-btn">ADD TO CART</a>
            <!--Strawberry Lemonade Card-->
            <div class="card"><img src="img/strawberry-lemonade.png" alt=""></div>
            <p class="card-title">Strawberry Lemonade</p>
            <p class="card-desc">A zesty fusion of strawberryies and lemons. A delightful twist on a classic favorite.</p>
            <div class="stats">
                <p>150 calories</p>
                <p class="price">$2.99</p>
            </div>
            <div class="qty">
                <p>-</p>
                <p>1</p>
                <p>+</p>
            </div>
            <a href="" class="card-btn">ADD TO CART</a>
            <!--Strawberry Herbal Tea Card-->
            <div class="card"><img src="img/tea.png" alt=""></div>
            <p class="card-title">Strawberry Herbal Tea</p>
            <p class="card-desc">A calming and fragrant herbal tea with a hint of freshly picked strawberries.</p>
            <div class="stats">
                <p>5 calories</p>
                <p class="price">$0.99</p>
            </div>
            <div class="qty">
                <p>-</p>
                <p>1</p>
                <p>+</p>
            </div>
            <a href="" class="card-btn">ADD TO CART</a>
        </main>

<!--Call to Action-->

<div class="call-to-action">
    <p class="call-to-action-header">BECOME A CHATEAU MEMBER TODAY AND GET $4 OFF YOUR FIRST ORDER!</p>
    <p>Strawberry Chateau members receive special benefits such as reduced cost on mobile orders, monthly deals on treats, and 
        exclusive access to Chateau events.</p>
        <form action="">
            <label for="name">First and last name</label>
            <input type="text" name="name" id="">
            <label for="email">Email Address</label>
            <input type="email" name="email" id="">
            <button>SIGN UP!</button>
        </form>
</div>

 <!--Footer-->
        <footer>
            <div class="footer-one">
                <p class="footer-title">Opening Hours</p>
                <div class="day-week">
                    <p class="footer-body">
                        Monday<br>
                        Tuesday<br>
                        Wednesday<br>
                        Thursday<br>
                        Friday<br>
                        Saturday<br>
                        Sunday<br>
                   </p>
                </div>
                <div class="hours">
                    <p class="footer-body">
                        9:00-5:00<br>
                        9:00-5:00<br>
                        9:00-5:00<br>
                        9:00-5:00<br>
                        9:00-11:00<br>
                        9:00-11:00<br>
                        Closed
                    </p>
            </div>
        </div>
        <div class="footer-two">
            <p class="footer-title">Location</p>
            <p class="footer-body">
                <address>
                    Placeholder<br>
                    123 Street Name<br>
                    City, State, 00000
                </address>
            </p>
        </div>
        <div class="footer-three">
            <p class="footer-title">Navigation</p>
            <p class="footer-body">
                <a href="#">Home</a><br>
                <a href="#">Merch</a><br>
                <a href="#">Contact Us</a><br>
                <a href="#">About</a><br>
                <a href="#">Order Now</a><br>
            </p>
        </div>
        <div class="footer-four">
            <p class="footer-title">Contact</p>
            <p class="footer-body">
                Phone: (123)-456-7890<br>
                <img class="facebook" src="img/facebook-footer.png" alt="">
            </p>
        </div>
        <img class="logo-white" src="img/logo-white.svg" alt="">
        <p class="footer-text"><img src="/img/copyright.svg" alt="">2024 Strawberry Chateau, City, State</p>
        </footer>
    </body>
 </html>

CSS

HTML, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    font-family: "urbane-rounded", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-color: #6A281F;
}

a {
    color: #F14271;
}

/*Ask about rem or pixels*/

.desktop-nav {
    background-color:white;
    filter:drop-shadow(0 0 0.30rem grey);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}

nav a {
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none; 
}

nav ul li {
    display: inline-block;
    justify-content: space-between;
    list-style: none;
}

.logo {
    display: inline-block;
    vertical-align: top;
    width: 10.75rem;
    height: 6.594rem;
    
}

.search-icon {
    filter: invert(36%) sepia(99%) saturate(2047%) hue-rotate(320deg) brightness(97%) contrast(94%);
    width: 1rem;
    height: 1rem;
}

我尝试了垂直对齐：中间和垂直对齐：顶部。 Top 将图像移至顶部，但 middle 不执行任何操作。

感谢您的帮助和时间。

html css
1个回答
0
投票

就像 toadv1ne 评论的那样，通过使用 

align-items: center;
并使用弹性框显示内容，您可以将导航项居中以使其与徽标对齐。

将其添加到您的 CSS 中：

nav ul {
    display: flex;
    align-items: center; /* vertically centers the content */
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.