Question 45622 in CSS Question posted in
Some basic documentation can be found here.

How to put the image mage on the top left side – CSS

I’m a complete novice here, I want to put the vault-tec image on the left side aligned with the navigation menu,

 <body>
    <div class="container">
      <nav class="navbar">
        <img src="/images/vault-tec.png" alt="vault-tec-logo" />
        <div class="home">Home</div>
        <div class="about">About</div>
        <div class="services">Services</div>
      </nav>
    </div>
  </body>

Here’s the css input:

`
.container {
    background-color: #35538b;
    height: 300px;
}

.navbar {
    gap: 50px;
    display: flex;
    float: right;
    font-size: 30px;
    font-family: monospace;
    align-items: center;
    color: #eac852;
}
.navbar img {
    width: 300px;
    height: 200px;
    justify-content: flex-start;`

I tried with the flex properties display, align-item...it’s not working, I want to know what exactly I’m doing wrong. I attached an image for reference.
Thanks

Tags:

3

Answers


  1. 0

    You can use align-self and margin-right to align the image to the top left side, your CSS code should look like this:

    .navbar img {
    width: 300px;
    height: 200px;
    align-self: flex-start;
    margin-right: auto;
}
    Login or Signup to reply.
  2. 0

    Is that how you want it to be? Did I get right?

    body{
  margin:0;
}
.container {
    background-color: #35538b;
    height: 300px;
}

.navbar {
    gap: 50px;
    display: flex;
    float: right;
    font-size: 30px;
    font-family: monospace;
    align-items: center;
    color: #eac852;
}
.navbar .logo {
    padding:15px;
    width: 300px;
    height: 200px;
    display:flex;
    align-items:center;
}
.logo img{
    width:100%;
    height:100%;
}
    <div class="container">
      <nav class="navbar">
      <div class="logo">
        <img src="https://images.pexels.com/photos/9604815/pexels-photo-9604815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="vault-tec-logo" /> 
      </div>
        <div class="home">Home</div>
        <div class="about">About</div>
        <div class="services">Services</div>
      </nav>
    </div>
    Login or Signup to reply.
  3. 0

    By putting the features of the Flexbox, it is distributed to all its children in the same way. Therefore, if you want to change the position properties of any of them without changing the status of the rest, you can use self-align or make position property for your navbar equal to "relative" and the img position property equal to "absolute" and you can manipulate its position by top bottom left right properities. Or, I suggest that it is better for you to make the icons in a new container and control this container in its place or the location of its children icons in it easier, and you will also be able to control the image more smoothly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search