Question

I have an html page in which I have a div inside a list item and trying to center the div in the list item (the div’s width is smaller than the list item’s width). My CSS looks like

ul.my {
    width: 100px;
    padding: 0;
}

li.my {
    list-style: none;
}

div.content {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

And the HTML has a snippet that looks like

<li class="my"><div class="content">stuff</div></li>

But the div is left aligned. How can I properly center align it?

Answer 1

You can either horizontal-center the content of the div with

div.content {
    width: 100%;
    text-align: center;
}

or center the div itself:

.my li {
    text-align: center;
}
div.content {
    display: inline-block;
}

For vertical centering, you’ll have to wrap the display: table-cell element in a display:table one, like

.my li {
    height: 200px;
    display: table;
}
div.content {
    display: table-cell;
    vertical-align: middle;
}