Центрирование набора элементов (In c SVG) внутри элемента Flex - PullRequest
0 голосов
/ 15 марта 2020

Я пытаюсь центрировать элементы внутри каждого изгибаемых элементов. Кто-нибудь знает, что я здесь не так делаю? Кажется, я не могу заставить его работать, даже когда использую 'justify'. Если это невозможно, как я могу центрировать элементы SVG? Извините за уродливый код SVG.

HTML: `

<!---WHY US SECTION---->
<section class="whyus">
  <h1 class="header">So, Why us?</h1>
  <div class="flexcontainer2">

    <div class="flexible">

      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="60px" height="60px" viewBox="0 0 48.822 75.672"
         enable-background="new 0 0 48.822 75.672" xml:space="preserve">
      <g>
        <path  d="M44.047,65.996l-10.402-4.148v-4.303c0-0.414-0.336-0.75-0.75-0.75H32.21v-5.447
            c0-0.416-0.336-0.75-0.75-0.75h-1.024V30.898c0-2.668-2.17-4.84-4.839-4.84c-2.668,0-4.84,2.172-4.84,4.84v23.219
            c0,1.842-1.498,3.34-3.339,3.34c-1.842,0-3.34-1.498-3.34-3.34V34.42h1.023c0.415,0,0.75-0.334,0.75-0.75v-7.602
            c0.517-0.262,0.984-0.602,1.396-1.012l7.81-7.811c2.156-2.156,2.156-5.666-0.001-7.824l-7.808-7.807
            C16.207,0.574,14.817,0,13.336,0c-1.481,0-2.871,0.574-3.912,1.615l-7.81,7.809C0.573,10.465,0,11.855,0,13.336
            c0,1.482,0.574,2.871,1.615,3.912l7.809,7.809c0.409,0.408,0.872,0.746,1.381,1.006v7.607c0,0.416,0.336,0.75,0.75,0.75h1.023
            v19.697c0,2.67,2.171,4.84,4.84,4.84s4.839-2.17,4.839-4.84V30.898c0-1.842,1.499-3.34,3.34-3.34c1.841,0,3.339,1.498,3.339,3.34
            v19.699h-1.023c-0.414,0-0.75,0.334-0.75,0.75v5.447h-0.684c-0.414,0-0.75,0.336-0.75,0.75v4.303l-10.402,4.148
            c-2.64,0.035-4.777,2.189-4.777,4.838c0,2.668,2.171,4.838,4.84,4.838h28.593c2.669,0,4.84-2.17,4.84-4.838
            C48.822,68.186,46.686,66.031,44.047,65.996z M11.831,24.881c-0.507-0.199-0.96-0.498-1.347-0.885l-7.809-7.809
            C1.917,15.43,1.5,14.418,1.5,13.336c0-1.08,0.417-2.092,1.175-2.852l7.81-7.809C11.243,1.918,12.255,1.5,13.336,1.5
            c1.081,0,2.093,0.418,2.851,1.176l7.808,7.807c1.573,1.572,1.573,4.131,0.001,5.703l-7.81,7.811
            c-0.388,0.389-0.846,0.688-1.36,0.891c-0.286,0.113-0.475,0.389-0.475,0.697v7.336h-2.047v-7.342
            C12.304,25.271,12.116,24.996,11.831,24.881z M27.229,58.295h0.684h3.548h0.685v3.313h-4.916V58.295z M28.662,52.098h2.048v4.697
            h-2.048V52.098z M26.622,63.107h6.129l7.237,2.887H19.384L26.622,63.107z M43.982,74.172H15.39c-1.842,0-3.34-1.498-3.34-3.338
            c0-1.842,1.498-3.34,3.34-3.34h0.089h28.416h0.015h0.073c1.842,0,3.34,1.498,3.34,3.34C47.322,72.674,45.824,74.172,43.982,74.172z
            "/>
        <path  d="M15.731,21.961l6.23-6.23c0.638-0.639,0.989-1.488,0.989-2.396c0-0.906-0.351-1.758-0.989-2.395l-6.23-6.23
            c-0.637-0.639-1.488-0.988-2.396-0.988s-1.758,0.35-2.396,0.988l-6.231,6.23c-1.321,1.322-1.321,3.471,0,4.793l6.231,6.229
            c0.637,0.639,1.488,0.99,2.396,0.99C14.243,22.951,15.093,22.6,15.731,21.961z M5.239,15.201c-1.029-1.027-1.029-2.703,0-3.73
            l6.231-6.232c0.496-0.496,1.158-0.768,1.865-0.768s1.37,0.271,1.865,0.768l6.23,6.23c0.496,0.496,0.769,1.158,0.769,1.865
            s-0.273,1.369-0.769,1.865l-6.23,6.232c-0.992,0.992-2.739,0.992-3.731,0L5.239,15.201z"/>
        <path  d="M18.264,13.336c0-2.719-2.211-4.93-4.929-4.93s-4.929,2.211-4.929,4.93c0,2.717,2.211,4.93,4.929,4.93
            S18.264,16.053,18.264,13.336z M9.157,13.336c0-2.305,1.875-4.18,4.179-4.18s4.179,1.875,4.179,4.18s-1.875,4.18-4.179,4.18
            S9.157,15.641,9.157,13.336z"/>
        <circle  cx="13.335" cy="13.336" r="2.277"/>
      </g>
      </svg>
      <h4 class="flexible">
        Flexible
      </h4>



      <p class="why">
        Tutoring online allows us to teach shorter but
         more concise lessons more frequently, and on
          short notice – Need extra help on a concept from
           class that you cant wrap your head around
            and dont want to dall behind? No problem.

      </p>
    </div>


    <div class="practical">

      <svg version="1.1" id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0px" y="0px"
         width="60px" height="60px"
         viewBox="0 0 52.771 68.254"
         enable-background="new 0 0 52.771 68.254"
         xml:space="preserve">
      <g>
        <path  d="M52.761,16.99c-0.004-0.066-0.018-0.129-0.038-0.191c-0.009-0.025-0.015-0.049-0.026-0.072
            c-0.036-0.078-0.082-0.154-0.146-0.219L36.263,0.219c-0.064-0.064-0.14-0.109-0.22-0.146c-0.022-0.01-0.046-0.018-0.069-0.023
            c-0.064-0.023-0.129-0.035-0.195-0.041C35.763,0.008,35.749,0,35.732,0H0.75C0.336,0,0,0.336,0,0.75v66.754
            c0,0.414,0.336,0.75,0.75,0.75h51.271c0.414,0,0.75-0.336,0.75-0.75V17.039C52.771,17.021,52.761,17.008,52.761,16.99z
             M50.21,16.289H36.482V2.561l6.864,6.863L50.21,16.289z M1.5,66.754V1.5h33.482v15.539c0,0.414,0.337,0.75,0.75,0.75h15.538v48.965
            H1.5z"/>
        <path  d="M9.983,14.65c1.138,0,2.024-0.563,2.024-2.076V9.568c0-1.506-0.886-2.068-2.024-2.068
            c-1.139,0-2.024,0.563-2.024,2.068v3.006C7.958,14.088,8.844,14.65,9.983,14.65z M8.601,9.568c0-1.012,0.516-1.477,1.382-1.477
            c0.866,0,1.381,0.465,1.381,1.477v3.006c0,1.02-0.516,1.484-1.381,1.484c-0.867,0-1.382-0.465-1.382-1.484V9.568z"/>
        <path  d="M15.348,14.65c1.286,0,2.035-0.756,2.035-1.641c0-0.318-0.097-0.396-0.321-0.396
            c-0.204,0-0.301,0.098-0.321,0.252c-0.059,0.467-0.166,1.193-1.324,1.193c-0.944,0-1.441-0.465-1.441-1.484V9.568
            c0-1.012,0.498-1.477,1.402-1.477c1.159,0,1.343,0.758,1.363,1.174c0.009,0.135,0.097,0.242,0.321,0.242
            c0.224,0,0.321-0.066,0.321-0.389c0-0.871-0.73-1.619-2.005-1.619c-1.109,0-2.043,0.563-2.043,2.068v3.006
            C13.333,14.088,14.249,14.65,15.348,14.65z"/>
        <path  d="M18.825,14.592c0.156,0,0.322-0.086,0.322-0.252v-2.979h1.235l1.5,2.912c0.078,0.152,0.185,0.34,0.34,0.34
            c0.186,0,0.37-0.166,0.37-0.332c0-0.037-0.01-0.086-0.039-0.125l-1.499-2.873c0.847-0.145,1.519-0.67,1.519-1.871
            c0-1.455-0.964-1.912-2.103-1.912h-1.723c-0.146,0.012-0.244,0.107-0.244,0.234v6.605C18.504,14.506,18.66,14.592,18.825,14.592z
             M19.147,8.092h1.323c0.866,0,1.46,0.379,1.46,1.35c0,0.98-0.594,1.367-1.46,1.367h-1.323V8.092z"/>
        <path  d="M7.871,26.229c0.117,0,0.223-0.047,0.252-0.164l0.448-1.494h2.695l0.448,1.494
            c0.039,0.117,0.136,0.164,0.243,0.164c0.176,0,0.39-0.127,0.39-0.281c0-0.02-0.009-0.037-0.009-0.059l-2.025-6.586
            c-0.048-0.146-0.214-0.225-0.389-0.225c-0.166,0-0.331,0.068-0.38,0.225L7.51,25.889C7.5,25.91,7.5,25.939,7.5,25.957
            C7.5,26.123,7.705,26.229,7.871,26.229z M9.924,20.105l1.178,3.912H8.737L9.924,20.105z"/>
        <path  d="M14.999,26.277v0.766c0,0.166,0.126,0.244,0.252,0.244c0.117,0,0.243-0.078,0.243-0.244v-0.766
            c1.012-0.076,1.772-0.658,1.772-2.066v-3.008c0-1.504-0.886-2.066-2.025-2.066c-1.139,0-2.024,0.563-2.024,2.066v3.008
            C13.216,25.627,13.975,26.201,14.999,26.277z M13.859,21.203c0-1.01,0.516-1.475,1.381-1.475c0.867,0,1.382,0.465,1.382,1.475
            v3.008c0,0.912-0.418,1.369-1.129,1.455v-0.717c0-0.166-0.126-0.234-0.243-0.234c-0.126,0-0.252,0.068-0.252,0.234v0.717
            c-0.721-0.078-1.139-0.543-1.139-1.455V21.203z"/>
        <path  d="M18.504,26.229c0.117,0,0.224-0.047,0.253-0.164l0.448-1.494h2.696l0.448,1.494
            c0.039,0.117,0.136,0.164,0.243,0.164c0.175,0,0.39-0.127,0.39-0.281c0-0.02-0.01-0.037-0.01-0.059l-2.024-6.586
            c-0.048-0.146-0.214-0.225-0.389-0.225c-0.165,0-0.331,0.068-0.379,0.225l-2.035,6.586c-0.009,0.021-0.009,0.051-0.009,0.068
            C18.135,26.123,18.339,26.229,18.504,26.229z M20.558,20.105l1.178,3.912h-2.365L20.558,20.105z"/>
        <path  d="M11.792,31.367c0.157,0,0.243-0.146,0.243-0.311c0-0.137-0.067-0.283-0.243-0.283H8.328
            c-0.146,0-0.292,0.08-0.292,0.244v6.598c0,0.166,0.146,0.252,0.292,0.252h3.465c0.176,0,0.243-0.156,0.243-0.291
            c0-0.154-0.086-0.301-0.243-0.301H8.678v-2.688h1.528c0.175,0,0.244-0.135,0.244-0.262c0-0.156-0.088-0.291-0.244-0.291H8.678
            v-2.668H11.792z"/>
        <path  d="M13.275,37.867h1.724c1.138,0,2.033-0.563,2.033-2.076v-2.949c0-1.504-0.895-2.068-2.033-2.068h-1.724
            c-0.175,0-0.292,0.107-0.292,0.234v6.617C12.983,37.752,13.1,37.867,13.275,37.867z M13.626,31.367h1.373
            c0.866,0,1.392,0.467,1.392,1.475v2.949c0,1.01-0.525,1.484-1.392,1.484h-1.373V31.367z"/>
        <path d="M22.194,31.367c0.156,0,0.243-0.146,0.243-0.311c0-0.137-0.068-0.283-0.243-0.283h-3.465
            c-0.146,0-0.292,0.08-0.292,0.244v6.598c0,0.166,0.146,0.252,0.292,0.252h3.465c0.175,0,0.243-0.156,0.243-0.291
            c0-0.154-0.087-0.301-0.243-0.301H19.08v-2.688h1.528c0.175,0,0.243-0.135,0.243-0.262c0-0.156-0.088-0.291-0.243-0.291H19.08
            v-2.668H22.194z"/>
        <path  d="M22.945,31.242l1.646,3.074l-1.674,3.096c-0.03,0.057-0.04,0.105-0.04,0.154c0,0.174,0.205,0.32,0.379,0.32
            c0.146,0,0.234-0.176,0.302-0.311l1.441-2.717l1.44,2.717c0.068,0.135,0.156,0.311,0.302,0.311c0.176,0,0.379-0.146,0.379-0.32
            c0-0.049-0.009-0.098-0.037-0.154l-1.685-3.096l1.655-3.074c0.038-0.07,0.059-0.137,0.059-0.205c0-0.164-0.186-0.283-0.379-0.283
            c-0.155,0-0.253,0.186-0.331,0.332l-1.402,2.666l-1.402-2.666c-0.078-0.146-0.174-0.332-0.331-0.332
            c-0.195,0-0.38,0.119-0.38,0.283C22.887,31.105,22.906,31.172,22.945,31.242z"/>
        <path  d="M30.034,37.926c1.284,0,2.034-0.758,2.034-1.639c0-0.32-0.098-0.4-0.321-0.4
            c-0.205,0-0.303,0.098-0.322,0.254c-0.058,0.465-0.164,1.191-1.322,1.191c-0.945,0-1.441-0.465-1.441-1.482v-3.008
            c0-1.008,0.496-1.475,1.402-1.475c1.158,0,1.343,0.756,1.361,1.174c0.011,0.135,0.098,0.242,0.322,0.242
            c0.224,0,0.321-0.068,0.321-0.387c0-0.875-0.73-1.623-2.005-1.623c-1.11,0-2.044,0.564-2.044,2.068v3.008
            C28.02,37.363,28.934,37.926,30.034,37.926z"/>
        <path  d="M33.481,37.867h3.465c0.176,0,0.244-0.156,0.244-0.291c0-0.154-0.087-0.301-0.244-0.301h-3.113v-2.688
            h1.527c0.176,0,0.244-0.135,0.244-0.262c0-0.156-0.088-0.291-0.244-0.291h-1.527v-2.668h3.113c0.157,0,0.244-0.146,0.244-0.311
            c0-0.137-0.068-0.283-0.244-0.283h-3.465c-0.146,0-0.292,0.08-0.292,0.244v6.598C33.189,37.781,33.336,37.867,33.481,37.867z"/>
        <path  d="M38.429,37.867h3.125c0.146,0,0.214-0.145,0.214-0.301c0-0.145-0.067-0.291-0.214-0.291H38.78v-6.268
            c0-0.164-0.166-0.234-0.322-0.234c-0.165,0-0.32,0.07-0.32,0.234v6.607C38.138,37.781,38.284,37.867,38.429,37.867z"/>
        <path d="M45.271,56.629H7.5c-0.414,0-0.75,0.336-0.75,0.75s0.336,0.75,0.75,0.75h37.771
            c0.414,0,0.75-0.336,0.75-0.75S45.685,56.629,45.271,56.629z"/>
        <path  d="M45.271,49.879H7.5c-0.414,0-0.75,0.336-0.75,0.75s0.336,0.75,0.75,0.75h37.771
            c0.414,0,0.75-0.336,0.75-0.75S45.685,49.879,45.271,49.879z"/>
        <path  d="M45.271,43.129H7.5c-0.414,0-0.75,0.336-0.75,0.75s0.336,0.75,0.75,0.75h37.771
            c0.414,0,0.75-0.336,0.75-0.75S45.685,43.129,45.271,43.129z"/>
      </g>
      </svg>
      <h4 class="practical">
        Practical
      </h4>






      <p class="why">
        Exam board focused lessons insure we teach you
        precisely  what you need to know and nothing more.
         If you write a vague or a degree level answer
         in an A-Level exam you likely will not get the
          marks.

      </p>
    </div>



    <div class="professional">

      <svg version="1.1" id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0px" y="0px"
         width="60px" height="60px"
         viewBox="0 0 69.633 67.004"
         enable-background="new 0 0 69.633 67.004"
         xml:space="preserve">
      <g>
        <g>
            <path  d="M69.442,38.44L35.375,0.239c-0.285-0.318-0.834-0.318-1.12,0L0.19,38.44
                c-0.197,0.221-0.246,0.535-0.125,0.807c0.121,0.27,0.389,0.443,0.684,0.443h11.067v26.564c0,0.414,0.335,0.75,0.75,0.75h44.499
                c0.415,0,0.75-0.336,0.75-0.75V39.69h11.067c0.295,0,0.563-0.174,0.684-0.443C69.688,38.975,69.639,38.661,69.442,38.44z
                 M57.066,38.19c-0.414,0-0.75,0.334-0.75,0.75v26.564H13.317V38.94c0-0.416-0.336-0.75-0.75-0.75H2.423L34.816,1.866L67.209,38.19
                H57.066z"/>
            <path  d="M18.711,32.475c0,12.996,14.988,25.635,15.625,26.166c0.139,0.115,0.309,0.174,0.48,0.174
                c0.17,0,0.341-0.059,0.481-0.174c0.637-0.531,15.624-13.17,15.624-26.166c0-8.883-7.225-16.107-16.105-16.107
                C25.936,16.368,18.711,23.592,18.711,32.475z M34.816,17.868c8.053,0,14.605,6.553,14.605,14.607
                c0,11.031-12.03,22.309-14.605,24.596c-2.575-2.287-14.605-13.564-14.605-24.596C20.211,24.42,26.763,17.868,34.816,17.868z"/>
            <path  d="M34.816,38.606c3.382,0,6.133-2.752,6.133-6.133c0-3.383-2.751-6.133-6.133-6.133
                c-3.382,0-6.133,2.75-6.133,6.133C28.684,35.854,31.435,38.606,34.816,38.606z M34.816,27.09c2.968,0,5.383,2.414,5.383,5.383
                s-2.415,5.383-5.383,5.383c-2.968,0-5.383-2.414-5.383-5.383S31.849,27.09,34.816,27.09z"/>
        </g>
      </g>
      </svg>
      <h4 class="professional">
        Professional
      </h4>





      <p class="why">
      If you are paying us to tutor you this is
       exaclty what we will do.We stick to our tight
       schedule and teach intensively, Not half
       assedly. This means you will have our full
       focus – Not our phones.

      </p>
    </div>
    <div class="monthly">

      <svg height="60px" viewBox="0 0 496 496"
       width="60px"
       xmlns="http://www.w3.org/2000/svg"><path d="m496 275.953125c0-20.007813-16.273438-36.289063-36.28125-36.289063-9.6875 0-18.796875 3.777344-25.65625 10.632813l-34.0625 34.0625v-284.359375h-315.3125l-84.6875 84.6875v411.3125h400v-109.015625l85.375-85.375c6.847656-6.847656 10.625-15.960937 10.625-25.65625zm-196.023438 139 20.816407 20.816406-29.136719 8.503907zm36.023438 13.390625-8.679688-8.679688 114.214844-114.222656 8.6875 8.6875zm-20-19.992188-8.6875-8.6875 114.230469-114.222656 8.6875 8.6875zm-236-381.039062v52.6875h-52.6875zm304 452.6875h-368v-384h80v-80h288v284.359375l-95.128906 95.121094-20.519532 72.253906 71.855469-20.957031 43.792969-43.792969zm90.0625-189.703125-12.519531 12.519531-28.6875-28.6875 12.519531-12.519531c3.832031-3.832031 8.929688-5.945313 14.34375-5.945313 11.175781 0 20.28125 9.105469 20.28125 20.289063 0 5.421875-2.113281 10.519531-5.9375 14.34375zm0 0"/><path d="m162.078125 330.617188-34.429687 37.878906c-10.152344-10.183594-24.175782-16.496094-39.648438-16.496094-30.871094 0-56 25.128906-56 56s25.128906 56 56 56 56-25.128906 56-56c0-9.542969-2.40625-18.527344-6.640625-26.398438l36.5625-40.21875zm-34.078125 77.382812c0 22.054688-17.945312 40-40 40s-40-17.945312-40-40 17.945312-40 40-40c11.335938 0 21.535156 4.792969 28.824219 12.398438l-30.113281 33.128906-18.269532-12.175782-8.875 13.3125 29.730469 19.824219 36.238281-39.863281c1.496094 4.199219 2.464844 8.65625 2.464844 13.375zm0 0"/><path d="m127.648438 224.496094c-10.152344-10.183594-24.175782-16.496094-39.648438-16.496094-30.871094 0-56 25.128906-56 56s25.128906 56 56 56 56-25.128906 56-56c0-9.542969-2.40625-18.527344-6.640625-26.398438l36.5625-40.21875-11.84375-10.765624zm.351562 39.503906c0 22.054688-17.945312 40-40 40s-40-17.945312-40-40 17.945312-40 40-40c11.335938 0 21.535156 4.792969 28.824219 12.398438l-30.113281 33.128906-18.269532-12.175782-8.875 13.3125 29.730469 19.824219 36.238281-39.863281c1.496094 4.199219 2.464844 8.65625 2.464844 13.375zm0 0"/><path d="m352 256h16v16h-16zm0 0"/><path d="m176 256h160v16h-160zm0 0"/><path d="m176 224h192v16h-192zm0 0"/><path d="m176 288h192v16h-192zm0 0"/><path d="m176 400h88v16h-88zm0 0"/><path d="m176 432h88v16h-88zm0 0"/><path d="m176 368h88v16h-88zm0 0"/><path d="m152 176h176c22.054688 0 40-17.945312 40-40v-64c0-22.054688-17.945312-40-40-40h-176c-22.054688 0-40 17.945312-40 40v64c0 22.054688 17.945312 40 40 40zm-24-104c0-13.230469 10.769531-24 24-24h176c13.230469 0 24 10.769531 24 24v64c0 13.230469-10.769531 24-24 24h-176c-13.230469 0-24-10.769531-24-24zm0 0"/><path d="m336 80h-48v48h48zm-16 32h-16v-16h16zm0 0"/><path d="m264 80h-48v48h48zm-16 32h-16v-16h16zm0 0"/><path d="m192 80h-48v48h48zm-16 32h-16v-16h16zm0 0"/></svg>
       <h4 class="Monthly">
         Monthly
       </h4>



      <p class="why">
        After the assessment we will make a plan of
         action of how to get you test ready, Then break
          this down into manageable monthly checklists basd
           on priority and keep you updated along the way.




      </p>
    </div>













  </div>








</section>

CSS:`

/*Why us section*/
.flexcontainer2{
  display: flex;
  justify-content: space-around;
  width:70%;
  margin:auto;
  align-content: center;

}
.flexcontainer2 div{
  margin:10px;
}
.whyus svg{
  fill:#120055;


}

.flexible{



}

.practical{


}

.professional{

}

.monthly{


}


h4{

  padding-top:35px;
  color: #120055;
  font-size: 1.2rem;
  }

.why {
  color:#120055;
  font-size: .9rem;

}

`Я не могу заставить его работать, даже при использовании «оправдать». Если это невозможно, как я могу центрировать элементы SVG? Извините за уродливый код SVG.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...