在对齐文本旁边的图像时遇到问题

Question

我试图在不使用任何位置属性（如 right:、left:、top: 和 bottom:）的情况下将图片与我网页上的某些文本对齐，但我无法按照我想要的方式对齐它

    body {
        background-color: #fafafa;
        font-family: Epilogeal, sans-serif;
    }
    
    
    .main {
        padding: 20px;
        overflow: hidden;
    }
    
    nav {
        width: 100%;
        position: sticky;
        display: flex;
    }
    
    .nav-links {
        flex: 1;
        text-align: left;
        padding-left: 50px;;
    }
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    li {
        display: inline;
        padding-left: 50px;
    }
    
    a {
        text-decoration: none;
        color: hsl(0, 0%, 41%);
        font-family: Epilogeal, sans-serif;
    }
    
    .register-btn {
        border: 2px solid hsl(0, 0%, 41%);
        border-radius: 15px;
        padding: 10px;
        width: 4%;
        text-align: center;
        position: fixed;
        right: 60px;
        top: 16px;
    }
    
    .login-btn {
        color:hsl(0, 0%, 41%);
        position: fixed;
        right: 215px;
    }
    
    .hero {
        padding: 150px;
    }
    
    .hero-header {
        color: hsl(0, 0%, 8%);
        font-size: 50px;
    }
    
    .hero-text {
        color: hsl(0, 0%, 41%);
        font-size: 18px;
        float: left;
    }
    
    .image {
        width: 700px;
        height: 700px;
        float: right;
        margin-bottom: 100px;
    }

    <!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="index.css">
        <link rel="stylesheet" href="https://fonts.google.com/specimen/Epilogue">
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <nav>
                <div class="logo">
                    <img src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\logo.svg" alt="logo">
                </div>
                <div class="nav-links">
                    <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Company</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
                <div class="login-btn">
                    <a href="#">Login</a>
                </div>
                <div class="register-btn">
                    <a href="#">Register</a>
                </div>
            </nav>
            <div class="hero">
                <div class="hero-header">
                    <h1>Make <br> remote work</h1>
                </div>
    
                <div class="hero-text">
                    <p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch productivity soar.</p>
                </div>
                <img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image">
            </div>
        </div>
    </body>
    </html>

我的网页如下所示：

这就是我想要的样子：

我不擅长在 CSS 中定位内容，因此非常感谢您的帮助！

Answer 1

你可以试试这个。

用这个替换英雄元素。

<div class="hero">
  <div class="hero-left">
    <div class="hero-header">
      <h1>Make <br> remote work</h1>
    </div>

    <div class="hero-text">
      <p>Get your team in sync, no matter your location. <br> Streamline processes, create team rituals, and <br> watch
        productivity soar.</p>
    </div>
  </div>
  <img class="image" src="C:\Users\Eemil.Korkka\Downloads\intro-section-with-dropdown-navigation-main\intro-section-with-dropdown-navigation-main\images\image-hero-desktop.png" alt="hero-image" />
</div>

.hero 选择器的

和 CSS

.hero {
    padding: 150px;
    display: flex;
    justify-content: space-between;
}

在对齐文本旁边的图像时遇到问题

Having trouble with aligning an image next to text

html

css