Question

Моя цель - выровнять текст по простым элементам div и диаграмме пончика (текст внутри), как показано на рисунке нижеНе стесняйтесь полностью изменить идею создания кольцевой диаграммы.

У меня есть шаблон на основе flexbox CSS.

Что яхочу иметь все тексты из трех столбцов (в одном из них есть кольцевая диаграмма с текстом «THR»).Фрагмент ниже необходимо изменить, чтобы все тексты были выровнены по вертикали:

@import url(https://fonts.googleapis.com/css?family=Karla);.row{box-sizing:border-box;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.col-xs,.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */figure{display:block}html{font-family:'Karla';-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;overflow:hidden;background: #fff;}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:'Karla',"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#fff;line-height:1.4rem}:focus{outline-color:transparent;outline-style:none}.box,.box-first{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;overflow:hidden;text-align:center;color:#555555}.box-container{box-sizing:border-box;padding:.5rem}@media only screen and (min-width:48rem){body{font-size:16px}.box,.box-first{padding:1rem}}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.col-xs,.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}


.chart-text {
  /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/
  fill: #000;
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}
.chart-number {
  font-size: 0.6em;
  line-height: 1;
  text-anchor: middle;
  -moz-transform: translateY(-0.25em);
  -ms-transform: translateY(-0.25em);
  -webkit-transform: translateY(-0.25em);
  transform: translateY(-0.25em);
}
.chart-label {
  font-size: 0.2em;
  text-transform: uppercase;
  text-anchor: middle;
  -moz-transform: translateY(0.7em);
  -ms-transform: translateY(0.7em);
  -webkit-transform: translateY(0.7em);
  transform: translateY(0.7em);
}
figure {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 768px) {
  figure {
    flex-direction: row;
  }
}
.figure-content {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  align-self: center;
}
.figure-content svg {
  height: auto;
}

<div class="row">
   <div class="col-xs-12">
      <div class="box box-container">
         <div class="row">
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                     <div class="col-xs">
                        <div>ONE</div>
                        <div style="font-size:15px;">100,000</div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                     <div class="col-xs">
                        <div>TWO TWO TWO</div>
                        <div style="font-size:15px;">2,350</div>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                  
                  <figure>
  <div class="figure-content">
    <svg width="40%" height="auto" viewBox="0 0 42 42" class="donut" aria-labelledby="beers-title beers-desc" role="img">
      <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff" role="presentation"></circle>
      <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" role="presentation"></circle>

      <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25" aria-labelledby="donut-segment-1-title donut-segment-1-desc">
      </circle>
      <!-- unused 10% -->
      <g class="chart-text">
        <text x="50%" y="50%" class="chart-number">
          THR
        </text>
        <text x="50%" y="50%" class="chart-label">
          35%
        </text>
      </g>
    </svg>
  </div>
</figure>
                  
                  <!--
                     <div class="col-xs">
                        <div>VTR</div>
                        <div style="font-size:15px;">57%</div>
                     </div>
                 --> 
                  
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Итак, я попытался использовать решение figure svg для всех трех полей, но текст обрезался:

@import url(https://fonts.googleapis.com/css?family=Karla);.row{box-sizing:border-box;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.col-xs,.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */figure{display:block}html{font-family:'Karla';-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;overflow:hidden;background: #fff;}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:'Karla',"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#fff;line-height:1.4rem}:focus{outline-color:transparent;outline-style:none}.box,.box-first{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;overflow:hidden;text-align:center;color:#555555}.box-container{box-sizing:border-box;padding:.5rem}@media only screen and (min-width:48rem){body{font-size:16px}.box,.box-first{padding:1rem}}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.col-xs,.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}


.chart-text {
  /*font: 16px/1.4em "Montserrat", Arial, sans-serif;*/
  fill: #000;
  -moz-transform: translateY(0.25em);
  -ms-transform: translateY(0.25em);
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
}
.chart-number {
  font-size: 0.9em;
  line-height: 1;
  text-anchor: middle;
  -moz-transform: translateY(-0.25em);
  -ms-transform: translateY(-0.25em);
  -webkit-transform: translateY(-0.25em);
  transform: translateY(-0.25em);
}
.chart-label {
  font-size: 0.2em;
  text-transform: uppercase;
  text-anchor: middle;
  -moz-transform: translateY(0.7em);
  -ms-transform: translateY(0.7em);
  -webkit-transform: translateY(0.7em);
  transform: translateY(0.7em);
}
figure {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-left: -15px;
  margin-right: -15px;
}
@media (min-width: 768px) {
  figure {
    flex-direction: row;
  }
}
.figure-content {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  align-self: center;
}
.figure-content svg {
  height: auto;
}

<div class="row">
   <div class="col-xs-12">
      <div class="box box-container">
         <div class="row">
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                  	<figure>
                      <div class="figure-content">
                        <svg width="40%" height="auto" viewBox="0 0 68 68" class="donut" >
                          <g class="chart-text">
                            <text x="50%" y="50%" class="chart-number">
                              ONE
                            </text>
                            <text x="50%" y="50%" class="chart-label">
                              100,000
                            </text>
                          </g>
                        </svg>
                      </div>
                    </figure>
                  </div>
               </div>
            </div>
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                  	<figure>
                      <div class="figure-content">
                        <svg width="40%" height="auto" viewBox="0 0 68 68" class="donut">
                          <g class="chart-text">
                            <text x="50%" y="50%" class="chart-number">
                              TWO TWO TWO
                            </text>
                            <text x="50%" y="50%" class="chart-label">
                              2,350
                            </text>
                          </g>
                        </svg>
                      </div>
                    </figure>
                  </div>
               </div>
            </div>
            <div class="col-xs-4">
               <div class="box-first box-container">
                  <div class="row">
                  	<figure>
                      <div class="figure-content">
                        <svg width="40%" height="auto" viewBox="0 0 68 68" class="donut" aria-labelledby="beers-title beers-desc" role="img">
                          <circle class="donut-hole" cx="34" cy="34" r="15.91549430918954" fill="#fff" role="presentation"></circle>
                          <circle class="donut-ring" cx="34" cy="34" r="15.91549430918954" fill="transparent" stroke="#d2d3d4" stroke-width="3" role="presentation"></circle>

                          <circle class="donut-segment" cx="34" cy="34" r="15.91549430918954" fill="transparent" stroke="#ce4b99" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="25" aria-labelledby="donut-segment-1-title donut-segment-1-desc">
                          </circle>
                          <!-- unused 10% -->
                          <g class="chart-text">
                            <text x="50%" y="50%" class="chart-number">
                              THR
                            </text>
                            <text x="50%" y="50%" class="chart-label">
                              35%
                            </text>
                          </g>
                        </svg>
                      </div>
                    </figure>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Anil K. · Answer 1 · 05 октября 2018

Вы также можете сделать это

.box-first { display:table; width:100%; height:100%; }
.box-first > div { display:table-cell; vertical-align:middle; }

Jacob Goh · Answer 2 · 05 октября 2018

Полагаю, вы хотите выровнять по центру первый и второй столбец по центру.

Вы можете сделать это с помощью flex с flex-direction: column и justify-content: center

<div class="col-xs-4" style=" display: flex; flex-direction: column; justify-content: center; ">

Я добавил нескольковстроенный стиль, чтобы показать вам, что это сделано.Не стесняйтесь реорганизовать встроенные стили в некоторые классы.

demo: https://jsfiddle.net/jacobgoh101/dLjwmhvk/2/

Выровнять текст по вертикали из трех столбцов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Выровнять текст по вертикали из трех столбцов

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы