Html 如何将八角形和p标记对齐在列的中心

我有一个div，其中有一个八角形，中间有img，下面有p标记。我已经创建了它，它在responsive中工作得很好，但是现在我想要的是，八角形div和p标记应该在div的中心，它也应该在responsive中工作

HTML代码

 <div class="row">
            <div class="col s12">

                <div class="table col s5 col l3 col m5">
                    <div class="hexagon">
                        <img src="img/graduated2.png">
                    </div>
                    <p class="text">ANDROID APP </p>
                </div>


                <div class="table col s5 col l3 col m5">
                    <div class="hexagon">
                        <img src="img/android6.png">
                    </div>
                    <p class="text">WEB DESIGN</p>
                </div>

                <div class="table col s5 col l3 col m5">
                    <div class="hexagon">
                        <img src="img/robotics5.png">
                    </div>
                    <p class="text">ANDROID </p>
                </div>


                <div class="table col s5 col l3 col m5">
                    <div class="hexagon">
                        <img src="img/book6.png">
                    </div>
                    <p class="text">APP DEVELOPMENT</p>
                </div>

---

jfiddle链接：-

您可以使用

页边距：0 auto

作为

.hexagon

对于

.text

使用

display:block

和

text align:center

JSIDLE链接：

                body
            {
                padding-top: 200px;
                padding-bottom: 200px;
                padding-left: 200px;
                padding-right: 200px;
            }
            .hexagon {
                width: 120px;
                height: 120px;
                background-color: brown;
                -webkit-clip-path: polygon(25% 0, 75% 0, 100% 30%, 100% 70%, 75% 100%, 25% 100%, 0% 70%, 0% 30%);
                clip-path: polygon(25% 0, 75% 0, 100% 30%, 100% 70%, 75% 100%, 25% 100%, 0% 70%, 0% 30%);

            }
            img
            {
                width: 60%;
                height: 60%;
                margin-top: 25px;
                margin-left: 23px;
            }
            .text
            {
                font-weight: 600;
                font-family: sans-serif;
                vertical-align: bottom;   
                display: table-cell;
                text-align: center;
            }
            .table{
             margin-top: 50px;
            }
             @media (max-width: 400px)  and (min-width:100px)
            {
                body
                {
                    padding-left: 50px;
                    padding-right: 50px;
                }

            }

             @media (max-width: 800px)  and (min-width:401px)
            {
                body
                {
                    padding-left: 10px;
                    padding-right: 10px;
                }
                .table
                {
                    margin-left: 20px;
                    margin-right: 20px;
                }
            }