CODEWITHSUNDEEP
htmlcss
Todd Mark
Todd Mark

Reputation: 1885

How to center content which its parent has position: fixed?

JSBIN

I want to center the number row, but its parent has fixed attribute and I don't want to javascript to calculate the number row position. Is there anyway to achieve with pure CSS?

I have try as follow:

  1. use margin: 0 auto, not successful, perhaps the reason is no width.
  2. use text-align: center, not successful, perhaps the number row is not inline element.

Thanks a lot :)

Upvotes: 1

Views: 34

Answers (1)

Alex W
Alex W

Reputation: 38253

Remove float:left from your li and add display:inline-block then use text-align:center on the ul.

#menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border:1px solid #f00;
    z-index: 99;
    ul{
        width: 100%;
        margin: 0 auto;
      text-align:center;
        padding: 0;
        list-style-type: none;
        li{
            display:inline-block;
            a{
                display: inline-block;
                width:32px;
                height: 32px;
                text-align: center;
                font-family: "Microsoft YaHei";
                font-size: 1.5rem;
                line-height: 180%;
                text-decoration: none;
                border-radius: 50%;
            }
        }
    }
    .active{
        a{
            background-color: rgba(255,255,255,0.7);
        }
    }
}

Upvotes: 5

Related Questions