从三个div列垂直对齐文本

时间：2018-10-05 10:08:51

标签： css flexbox vertical-alignment

我的目的是按照下面的图像对齐来自普通div和甜甜圈图的文本（内部文本）。随时完全改变创建甜甜圈图的想法。 enter image description here

我有一个基于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>

2 个答案:

答案 0 :(得分：0)

我猜你想垂直居中对齐第一和第二列。

您可以使用带有flex-direction: column和justify-content: center的flex来实现

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

我添加了一些内联样式以显示已完成。随意将内联样式重新组织为一些类。

演示：https://jsfiddle.net/jacobgoh101/dLjwmhvk/2/

答案 1 :(得分：0)

您也可以这样做

.box-first { display:table; width:100%; height:100%; }
.box-first > div { display:table-cell; vertical-align:middle; }
相关问题
最新问题