텍스트를 일정 위치나 중앙에 넣고 싶은데요.

<ul class="list-inline div-ring">
        <li style="width:300px; height:300px;">
            <div class="ring-item bg-red">
            <h4 class="div-title-underline-thin border-white">믿음</h4>
                <p>내용<br></p>
            </div>
        </li>
        <li style="width:280px; height:280px;">
            <div class="ring-item bg-blue">
                <p>내용</p>
            </div>
        </li>
        <li style="width:300px; height:300px;">
            <div class="ring-item bg-orange">
                <p>내용</p>
            </div>
        </li>

</ul>