CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 797

CSS. Center block on the mobile devices

http://jsfiddle.net/2r4bzjqe/

First of all I need to display this block (without static width, because it will be displayed on various mobile devices) in the center of page.

And I need to display this ul list in one vertical line, so second li should start on the same place that first li. I can't use static width, text-align: left and margin: 0 auto, because it should work for any mobile devices.

Current situation:

  Test

  Test Test
    Test
  Test Test

I need this for not fixed screen width:

  Test

  Test Test
  Test
  Test Test

Upvotes: 0

Views: 1664

Answers (2)

Doml The-Bread
Doml The-Bread

Reputation: 1771

//EDIT: i updated this so your text block is now centered within a parent container. you would have to use a parent container for this solution with the following css

.test {
    text-align: left;
    display: inline-block
    
}

ul {
    list-style: none;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
}
<div class="container">
<div class="test">
    <div>
        Test
    </div>
    <ul>
        <li>Test Test</li>
        <li>Test</li>
        <li>Test Test</li>
    </ul>
</div>
</div>

since ul has a standard padding you should remove that

Upvotes: 1

ddlab
ddlab

Reputation: 930

normally there should be a reset.css first (resets all default element behaviors), I did the minimum first instead of reset.css, and then you may use the following css

* {margin:0; padding:0;} /*use reset.css here*/

.test {
    text-align: center;
}

ul {
    list-style: none;
    text-align:left;
    display: inline-block; /*this does the trick*/
}

Upvotes: 1

Related Questions