Question

我有一个div，其中有一个八边形，中间有img，p标签位于它的下面。我创建了它，并且它在响应中也可以正常工作，但是现在我想要的是八边形div和p标签应位于div的中心，并且也应该在响应式标签中起作用。

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>

CSS

                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;
                }
            }

jfiddle链接：-https://jsfiddle.net/arunoday/s5j30cwa/3/

Answer 1

您可以将margin: 0 auto用于.hexagon。

对于.text，请使用display:block和text-align:center。

jsfiddle链接：http://jsfiddle.net/vz7q9du1/

如何将八边形和p标签对准col

1 个答案: