12
Chcę, aby tekst wewnątrz mojego div pozostał taki sam rozmiar w proporcji % do div elementu nadrzędnego. I.E. Chcę, aby mój tekst miał font-size z 50% szerokości div dla rodziców. Więc kiedy rozmiar strony się zmienia, tekst zawsze pozostaje ten sam rozmiar w %.Jak ustawić rozmiar czcionki względem div rodzica?
Oto co mówię:
.counter-holder{
\t display: block;
\t position: absolute;
\t width:90%;
\t height:20%;
\t top: 70%;
\t left: 50%;
\t /* bring your own prefixes */
\t transform: translate(-50%, -50%);
}
.counter-element-box{
\t position:relative;
\t vertical-align: text-top;
\t border-style: solid;
border-width: 1px;
width: 20%;
height: 100%;
float:left;
margin: 6%;
}
.counter-element-text{
\t position:absolute;
\t top:50%;
\t width: 50%;
\t max-width:50%;
\t display: inline-block;
\t height:100%;
\t margin-left:50%;
\t font-size : 80%;overflow: hidden;
}
.counter-element-value{
\t position:absolute;
\t top:50%;
\t width: 50%;
\t max-width:50%;
\t display: inline-block;
\t height:100%;
\t padding-left:30%;
\t font-size : 80%;overflow: hidden;
}<div class="counter-holder">
\t <div class="counter-element-box">
\t \t <div id="years" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t Years
\t \t </div>
\t </div>
\t <div class="counter-element-box">
\t \t <div id="missions" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t Missions
\t \t </div>
\t </div>
\t <div class="counter-element-box"> \t
\t \t <div id="team" class="counter-element-value">
\t \t \t 0
\t \t </div>
\t \t <div class="counter-text counter-element-text" >
\t \t \t Team
\t \t </div>
\t </div> \t \t \t
</div>uruchomić ten fragment na pełnym ekranie i spróbuj rozmiaru strony i zobaczyć, jak zmienia się rozmiar tekstu i nie montażu wewnątrz div granice. Jak mogę temu zapobiec, więc zawsze pozostaje w granicach?
Czy na pewno chcesz zmienić 'ta font-size'and nie' width'? – Core972
Zrobiłem jedno i drugie, to nie pomaga. Jak również pozostawiając jedną z opcji. Tekst jest wciąż zmieniany. – Tachi
Istnieje podobne pytanie z wieloma dobrymi odpowiedziami na https://stackoverflow.com/q/10292001/2615878. – Theophilus