PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

[FIXED] how to vertically align a floated image

 November 18, 2022     css, floating, html, image, vertical-alignment     No comments   

Issue

I have this floated image and I would like to have it on the left of the flex-navbar. The layout should be responsive and the image vertically aligned to the middle (vertically-align: middle; doesn't work). Thanks in advance!

https://jsfiddle.net/wonrpfsc/

<div class="container">
        <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
    <div id="navbar">
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>


#navbar {
    display: flex;
}

#navbar a {
    flex: 1 1 0;
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}

#logo {
    width: 10vw;
    height: 10vw;
    float: left;
    vertical-align: middle;
}

Solution

You can try moving the logo into the navbar div like this:

'<div class="container">
    <div id="navbar">
       <a href="#"><img id="logo" src="http://brandmark.io/logo-rank/random/apple.png" alt=""/></a>
        <a href="#">Home</a>
        <a href="#">About U</a>
        <a href="#">Our Service</a>
        <a href="#">Our Products</a>
        <a href="#">Contac</a>
    </div>
</div>'

And change the CSS like this:

#navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}


Answered By - W. Van Pelt
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing