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

How to make this logo image sit in the center of the header with the same horizontal alignment? – CSS

I’m trying to align this logo in the center of the page, between the two sections of links in the header. I have the image in a separate div, and a unordered list on either side, with float left and float right. Not sure if the order or nesting is correct, still very new to CSS and HTML. For some reason, the logo is sitting way above the row of header links, and I want them to all be horizontally aligned, with the logo vertically aligned too.

problem
the html code
the css code
the css code
how the header links should be positioned, ideally with logo right in the middle of the page

I tried to use text-align: center on the div with logo which centers it on the page, but places it above the header and social links. I also tried placing it before, after, and in between the unordered lists in the header_main div, with no luck.

Tags:

3

Answers


  1. 0

    Because they are in two different dev, you need to move mainLogo dev between the uls. or make its position absolute.

    Login or Signup to reply.
  2. 0

    I dont have the images, so I am just giving an abbreviation. From the question, I got to know that you want to center the logo in the navbar.

    For this, you can use a CSS property called flexbox. Add thatproperty to the parent class like;

    .container-fluid{
display:flex; //css property for alignments
justify-content:space-between; //gives space between child elements
align-items:center; //vertically aligns the elements in the center
}

<div class="container-fluid">
<ul>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Portfolio</a></li>
</ul>
<img src="images/logo" alt="your image" >
<ul>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Portfolio</a></li>
</ul>
    Login or Signup to reply.
  3. 0

    Use flexbox to center of the header.
    Click here.

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

Back To Top
Search