Centering right inside a list (ul)

Asked

Viewed 579 times

3

Is there any way to center the logo of this example without using two lists?

inserir a descrição da imagem aqui

In the example website, it uses two lists to keep the logo in the center, how can I put the logo inside a "li" without affecting the menu structure?

html css

  • What do you mean two lists? You want to have the logo in the middle of <li> from one menu? Can you describe better what we should look for on the other site?

  • note that on the other site there are two <ul> for a single menu, which is not efficient. <ul> logo <ul>. I’m looking for a better way to do the same thing, without using two <ul> and putting the logo inside a <li>. The best way I’ve found so far is this http://stanhub.com/how-to-center-a-logo-in-unordered-list-navigation-using-css3-nth-child-selector/

  • I don’t quite understand the problem. It seems simple. Can you explain from this example? -> http://jsfiddle.net/y9jLte8s/

  • http://jsfiddle.net/y9jLte8s/1/ ?

  • I’m not sure I understand what you want... do you want to get the image lower? like this -> http://jsfiddle.net/y9jLte8s/2/ ?

  • that’s right!! Now how I remove the space that’s left on top?

  • 2

    http://jsfiddle.net/y9jLte8s/4/ <-

  • 1

    @Sergio excellent, creates a response.

Show 3 more comments

2 answers

3


You can insert the image into one of the <li> and then use position and top to adjust the position of this element.

As you yourself suggested having a specific class in that element is useful. So the HTML would be:

<div class="nav">
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li class="logo"><a href=""><img src="/favicon.png"/></a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
    </ul>
</div>

and the important CSS:

.nav ul li{
    float: left;
}
.logo {
    position: relative;
    top: -10px;
}

jsFiddle: http://jsfiddle.net/y9jLte8s/4/

1

I set an example in Codepen http://codepen.io/guidiego/pen/ZGxZbj using Bootstrap and SCSS, but I leave some alerts:

I would use Nav-pills to space the last li of the first part (:Nth-Child(2)) and leave the logo outside the LI, the only reason is responsiveness, it is difficult to treat the menu when it has an element that does not belong to it!

The form addressed is also not the best, I particularly only use position:BSOLUTE on extreme issues!

Anyway it’s the code and the hint :)

Hugs

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.