Question 44101 in Html Question posted in
Some basic documentation can be found here.

Image Logo CSS on Navbar; Center Positioning – Html

Image Logo CSS on Navbar; Center Positioning

Hi there, I’m working on a project for myself as a skill improvement. So there is a problem, I’m editing the image for the logo on the navbar with the center position and I’m using HTML with a class from CSS, here is the syntax.

<div class="navbar-logo-header">
<img src="uis-logo.png" alt="uis-logo">
</div>

.navbar-logo-header {
    width: 10px;
    height: 3px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

The result is that the position is not flexible according to the image I want, I have given other properties and values, the results still fail and fall apart. Maybe can give me tips in the form of additional class properties and values according to what I want? I am very grateful for the help.

This is the result:
https://urlis.net/9pvgrmzk

I hope that it can help and according to my expectations, the position of the logo is flexible and the red line matches the picture I provided.

Tags:

2

Answers


  1. 0

    Try setting the margin to 0 auto:

    .navbar-logo-header {
    margin: 0 auto;
}
    Login or Signup to reply.
  2. 0

    Using display Block

    The margin right auto and margin left auto should be applied on the child element the image or a seperat div wrapped around the image.

    Keep in mind that to center display block elements, elements must have a defined width and height

    Using display flex
    Also it would be easier to use display flex with justify content center and align items center on the parent element.

    .navbar-logo-header {
    width: 10px;
    height: 3px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search