代码之家  ›  专栏  ›  技术社区  ›  Datacrawler

从三个div列垂直对齐文本

vertical-alignment flexbox css
  •  1
  • Datacrawler  · 技术社区  · 6 年前

    enter image description here

    我有一个基于flexbox CSS的模板。 

    @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 回复  |  直到 6 年前
        1
  •  0
  •   Jacob Goh    6 年前

    我想你应该把第一列和第二列垂直居中对齐。

    您可以使用flex和 flex-direction: column 和 justify-content: center 

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

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

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

        2
  •  0
  •   Anil K.    6 年前

    你也可以这样做 

    .box-first { display:table; width:100%; height:100%; }
.box-first > div { display:table-cell; vertical-align:middle; }
    推荐文章
    William Entriken  ·  排列不同尺寸的徽章
    7 年前
    user438461  ·  在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件
    7 年前
    SmallSani  ·  当更改内容时,如何在页面上垂直居中放置div?
    7 年前
    Benji  ·  -webkit背景剪辑:文本和垂直居中文本
    7 年前
    Travis Martin  ·  flexbox布局中的垂直文本
    7 年前
    Mike Waldrup  ·  弹性物品被撞倒,正好是前一件物品的一半高度
    7 年前
    karlo1zg  ·  垂直对齐输入元素中间的浮动标签
    7 年前
    Ahmed Elashker  ·  Xamarin在平台垂直选项上形成XAML
    8 年前
    coreysimons  ·  动态布局中的图像对齐
    8 年前
    Théo Clayette  ·  设置垂直Android工具栏
    8 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号