0

I have tried so many ways to get this to work. My goal for it is to correctly align to the center of the screen regardless of which device is being used. (Responsive).

My current code is:

<style>
    ul {
        width: 615px;
        margin: 50% 100%; 
    }

    .item {
        position: relative;
        display: table; 
        text-align: center;
        width: 615px;
        height: 80px;
        font-family: UnfoldingTrag;
        font-size: 60px;
        color: #fff;
    }

    .item div{
        display: table-cell; 
        vertical-align: middle; 
        text-align: center; 
    }
    </style>

    <ul>
        <li class="item"> <div>Crime.pw</div> </li>
    </ul>

But it wont work properly. When I zoom in with CTRL & + in chrome, it does something like this: https://gyazo.com/d7c848bb4c1079334d74ccfbf58770f8

It should align up properly no matter what screen size or device. Is there any easy way to do this?

I know this is probably a duplicate of 100 questions but I cant find any working code anywhere for my case.

The current code is wrapped inside a div with the class container heres its CSS:

.container {
    position: fixed;
}

The reason its fixed is because my Navigation menu wont display properly otherwise for some odd reason. Not sure if it still needs this position attribute so i'll check on it now.

P.S: Feel free to go to the following page to debug my CSS directly if you wish: http://www.crime.pw

0 Answers0