Horizontally Center an Element of Variable Width

by kaikemono

HTML

<div id="canvas">

        <ul>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Vestibulum id ligula porta felis euismod semper.</li>
            <li>Donec ullamcorper nulla non metus auctor fringilla.</li>
            <li><img src="http://placekitten.com/g/300/100" /></li>
            <li>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</li>
            <li>Donec ullamcorper nulla non metus auctor fringilla.</li>
            <li>Nulla vitae elit libero, a pharetra augue.</li>
            <li>Cras mattis consectetur purus sit amet fermentum.</li>
        </ul>
            
</div>

CSS

body {
    background-color: #9eadc3;
    font-family: "Helvetica Neue";
    line-height: 1.4;
    text-align: center;
}

ul {
    display: inline-block;
    background-color: #f2f4f7;
    margin: 2em;
    padding: 2em;
    text-align: left;
}