Center a vertical list inside a div

Question

I am struggling with possibly easy to solve question. I have a unordered list and 3 items inside a responsive divs.

I have managed to centre it horizontally but the vertical is where I am struggling with.

<div class="left">  
    <div class="boxtext">
        <div class="insidetext"> 
            <ul>
                <li>WATER</li>
                <li>JUICE</li>
                <li>TEA</li>
            </ul>
        </div>
    </div>
</div>

.left {
    @include aspect-ratio(16,9);
    width: 50%;
    height: 100vh;
    min-width: 300px;
    position: relative;
    background-size: cover;
    background-color:#333;
    position: relative;
}

@media (max-width:768px) {
    .left {
        width: 100%;
        height: 70vh;
    }
}

.boxtext {
    @include aspect-ratio(16,9);
    border: solid white 0.15em;
    height: 70vh;
    width: 70%;
    margin: auto;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    text-align: center;
}

@media (max-width:768px) {
    .boxtext {
        width: 70%;
        height: 70%;
    }
}
.insidetext {
    @include aspect-ratio(16,9);
    background-color: aliceblue;
    height: 70%;
    width: 70%;
    margin: auto;
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    font-size: 9vh;
    text-align: center;
    min-height:100px;
}

.insidetext li {
    list-style-type:none;
}

.insidetext ul {
    display: table;
    margin: 0 auto;
}

.insidetext ul,li {
    list-style-type: none;
    list-style-position:inside;
    margin:0 auto;
    padding:0;
    vertical-align:middle;
}

here is a test: http://jsfiddle.net/qq3LLop8/

looks okay to me.if you really wanted to you could make the text smaller as the image gets smaller — Rachel Gallen, Jul 20 '15 at 19:19

score 2 · Accepted Answer · answered Jul 20 '15 at 19:23

2

This should work:

.insidetext ul {
  display: table;
  margin: 0 auto;
  position: relative;                   <-- Note these additions
  top: 50%;                             <--
  transform: translateY(-50%);          <--
}

See example:

https://jsfiddle.net/atasker2/jo6etx0u/

answered Jul 20 '15 at 19:23

nextstep

1,399
3
11
26

for some reason this works on the jsfiddle but not on the site, but thanks – user29200 Jul 20 '15 at 19:36
Did you include all the html on the page? Could you provide a link to your code? – nextstep Jul 20 '15 at 19:40
got it working now,Thank you :) – user29200 Jul 20 '15 at 19:44

score 0 · Answer 2 · answered Jul 20 '15 at 19:44

0

Just add display: table; to .insidetext and display: table-cell; to .insidetext ul.

answered Jul 20 '15 at 19:44

Jacob

2,212
1
12
18

Center a vertical list inside a div

2 Answers2