Jump to content

W3.CSS Vertically Align Bar-Item


HunTer_NX
 Share

Recommended Posts

Hello, I use W3.CSS and I would like to make a navigation bar with an image icon on the right. However when I place the image the buttons are not aligned vertically anymore. I managed to cheat a little by reducing the size of the image and place it into a div but it restricts me a bit.
Here is the code.
Thank you in advance for your help.


  	<div class="w3-bar w3-black ">
      		<div class=" w3-bar-item w3-hide-small w3-xlarge">
        		<a href="./achat.php" class="w3-button w3-bar-item">Page 1</a>
              		<span class="w3-bar-item w3-blue">Page 2</span>  
      		</div>
      		<div class="w3-bar-item w3-right">
        		<!-- Image -->
        		<img src="./img/default.jpg" style="width: 50px;" class="w3-hover-opacity w3-circle w3-hide-small " alt="Icon Profil">
        		<div id="Profil" class="w3-dropdown-content w3-bar-block w3-card-4 w3-right w3-hide-small" style="right:1%">
          		<a href="./profil.php" class="w3-bar-item w3-button"><i class="fa fa-user"></i>Profil</a>
                	<a href="includes/deconnexion.php" class="w3-bar-item w3-button"><i class="fa fa-sign-out"></i> Se déconnecter</a>
            	</div>
      </div>

 

Edited by HunTer_NX
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...