Как выровнять восьмиугольник и р-тег в центре цв - PullRequest
Новая
       7

Как выровнять восьмиугольник и р-тег в центре цв

0 голосов
/ 16 декабря 2018

У меня есть div, в котором есть восьмиугольник с img в центре и тэгом p чуть ниже него. Я создал его и он отлично работает и в отзывчивом виде, но теперь мне нужно, чтобы div и восьмиугольниктег должен быть в центре div, и он также должен работать в отзывчивом формате.

HTML CODE 

 <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 link: -https://jsfiddle.net/arunoday/s5j30cwa/3/

1 Ответ

0 голосов
/ 16 декабря 2018

Вы можете использовать margin: 0 auto для .hexagon.

И для .text используйте display:block и text-align:center.

jsfiddle link: http://jsfiddle.net/vz7q9du1/

...