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

当更改内容时,如何在页面上垂直居中放置div?

vertical-alignment flexbox css html
  •  1
  • SmallSani  · 技术社区  · 8 年前

    我在卡片上有一个小文字,我可以垂直对齐中心。

    重要提示: 

    .article-div{
    height: calc(100% - 100px);
    padding: 0px 40px 0px 40px;
    text-align: justify;
    overflow: auto;
}

    大文本: CodePen 

    .article-div{
    height: calc(100% - 100px);
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content:  center;
    padding: 0px 40px 0px 40px;
    text-align: justify;
    overflow: auto;
}

    小文本: CodePen

    2 回复  |  直到 8 年前
        1
  •  1
  •   kukkuz    8 年前

    你不需要 包 这个 flexbox

    1. 去除 flex-wrap: wrap article-div (因此 align-content: center 只有当 包装

    2. 文章分类 弹性项目 (其母公司 info-div 不是一个 ),所以 flex: 1 0 auto 可以删除。 

    .card-card {
  width: 1000px;
  min-width: 1000px;
  height: 560px;
  display: flex;
  margin: 50px auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
  border-radius: 0px;
  background-color: #fff;
}

.card-img-div {
  width: 384px;
  height: 560px;
  position: relative;
}

.card-img {
  height: 560px;
  border-radius: 0px 0 0 0px;
  position: absolute;
  clip: rect(0px, 384px, 562px, 0px);
  left: -0px;
}

.info-div {
  width: 616px;
  height: 100%;
  border-radius: 0 0px 0px 0;
}

.caption-div {
  width: 100%;
  height: 50px;
}

.footer-div {
  width: 100%;
  height: 50px;
}

.article-div {
  height: calc(100% - 100px);
  display: flex;
  /*flex: 1 0 auto;*/
  flex-direction: column;
  /*flex-wrap: wrap;
  align-content: center;*/
  justify-content: center;
  padding: 0px 40px 0px 40px;
  text-align: justify;
  overflow: auto;
}
    <div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
    </div>
      
    <div class="footer-div"></div>
  </div>
 </div>
 
 <div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>
<p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся практически в каждом водоеме.
</p>
<p>
Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания. 
  </p>      
    </div>
      
    <div class="footer-div"></div>
  </div>
 </div>

    当出现溢出时,上述方法隐藏了内容的顶部和底部。下面是使用 额外包装 那就是 -请查看: 

    .card-card {
  width: 1000px;
  min-width: 1000px;
  height: 560px;
  display: flex;
  margin: 50px auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
  border-radius: 0px;
  background-color: #fff;
}

.card-img-div {
  width: 384px;
  height: 560px;
  position: relative;
}

.card-img {
  height: 560px;
  border-radius: 0px 0 0 0px;
  position: absolute;
  clip: rect(0px, 384px, 562px, 0px);
  left: -0px;
}

.info-div {
  width: 616px;
  height: 100%;
  border-radius: 0 0px 0px 0;
}

.caption-div {
  width: 100%;
  height: 50px;
}

.footer-div {
  width: 100%;
  height: 50px;
}

.article-div {
  height: calc(100% - 100px);
  /*padding: 0px 40px 0px 40px;*/
  text-align: justify;
  overflow: auto;
  position: relative;
}

.article-div>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 80px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
    <div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
      <div>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
      </div>
    </div>

    <div class="footer-div"></div>
  </div>
</div>

<div class="card-card">
  <div class="card-img-div">
    <img class="card-img" src="http://podsekai.in.ua/wp-content/uploads/2015/02/карась-серебряный.jpg" />
  </div>
  <div class="info-div">
    <div class="caption-div"></div>
    <div class="article-div">
      <div>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
        <p>Карась — рыба семейства карповых, которая в нашей стране водится практически повсеместно. Это пресноводная рыба, которая может жить как в реках, так и в озерах со стоячей водой. Караси неприхотливы к условиям проживания и питанию, поэтому водятся
          практически в каждом водоеме.
        </p>
        <p>
          Спинной плавник длинный<span lvl="3">, глоточные зубы однорядные</span>. Тело высокое с толстой спиной, умеренно сжатое с боков. Чешуя крупная и гладкая на ощупь. Окраска варьирует в зависимости от места обитания.
        </p>
      </div>
    </div>

    <div class="footer-div"></div>
  </div>
</div>
        2
  •  1
  •   Manfice    8 年前 
    .article-div{
   border:solid 1px red;
   height: calc(100% - 100px);
   display: flex;
   flex: 1 0 auto;
   flex-flow: column nowrap;
   align-content: center;
   justify-content:  center;
   padding: 0px 40px 0px 40px;
   text-align: justify;
   overflow: auto;
}
.article-div p{
   flex: 0 0 auto;  
}

    Small text Code pen

    推荐文章
    JWWalker  ·  CSS的resize属性可以用来调整flex列宽吗?
    1 年前
    Sidaqpreet Singh  ·  为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?
    1 年前
    rifx  ·  在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式
    1 年前
    Fox L  ·  每行4个项目,但如果少于4个项目则留空?
    1 年前
    Zack Riquelme  ·  如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?
    1 年前
    JobHunter69  ·  为什么这个组件不填充整个宽度?
    1 年前
    Vasantha Kalyani  ·  Flexbox Html CSS设置位置问题[重复]
    1 年前
    coder  ·  边界半径不适用于容器元素
    1 年前
    user9026  ·  项目登录页面(freecodecamp)定价设计
    1 年前
    Bo Thompson  ·  根据需要调整柔性物品的高度,但不得超过容器
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号