Issue
I have a certain small text on the card which I was able to align center vertically. But if you make the text big then everything deteriorates.
I made two options and they work independently of each other, but they do not work together. In the large text some of the text is lost.
Important note: Text should always be centered vertically.
.article-div{
height: calc(100% - 100px);
padding: 0px 40px 0px 40px;
text-align: justify;
overflow: auto;
}
Big text: 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;
}
Small text: CodePen
Thank you!
Solution
You don't need to wrap the flexbox
:
Remove
flex-wrap: wrap
fromarticle-div
(and thereforealign-content: center
which has meaning only when wrapping)article-div
is not a flex item (its parentinfo-div
is not aflexbox
), soflex: 1 0 auto
can be removed.
See demo below with both the cases:
.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>
The above approach hides the top and bottom portion of the content when there is an overflow. Below is an approach using an extra wrapper that is positioned absolutely - check it out:
.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>
Answered By - kukkuz Answer Checked By - Marilyn (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.