하단에 텍스트 정렬

Question

하단에 텍스트를 정렬 할 수 없습니다.

.container { 
 
    margin: auto; 
 
    border-radius: 25px; 
 
    width: 320px; 
 
    height: 480px; 
 
    background-color: lightgrey; 
 
    background-image: url("https://raw.githubusercontent.com/zumartic/calculator/master/calculator.jpg"); 
 
    box-shadow: 10px 10px 5px #888888; 
 
} 
 
.head { 
 
    width: 320px; 
 
    height: 45px; 
 
    color: yellow; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
.display1 { 
 
    width: 320px; 
 
    height: 45px; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
    margin-left: -5px; 
 
    text-align: right; 
 
} 
 
.display2 { 
 
    width: 320px; 
 
    height: 90px; 
 
} 
 
#D2-content { 
 
    width: 320px; 
 
    font-size: 200%; 
 
    word-wrap: break-word; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    margin-left: -1px; 
 
    vertical-align: bottom; 
 
}

<div class="container"> 
 
    <div class="head" id="head">FCC Calculator</div> 
 
    <div class="display1" id="display1"></div> 
 
    <div class="display2" id="display2"> 
 
    <div id="D2-content">0</div> 
 
    </div> 
 
    <hr> 
 
    <div class="button-item" id="CE">CE</div> 
 
    <div class="button-item" id="C">C</div> 
 
    <div class="button-item"></div> 
 
    <div class="button-item"></div> 
 
    <div class="button-item" id="7">7</div> 
 
    <div class="button-item" id="8">8</div> 
 
    <div class="button-item" id="9">9</div> 
 
    <div class="button-item" id="divide">/</div> 
 
    <div class="button-item" id="4">4</div> 
 
    <div class="button-item" id="5">5</div> 
 
    <div class="button-item" id="6">6</div> 
 
    <div class="button-item" id="multiply">*</div> 
 
    <div class="button-item" id="1">1</div> 
 
    <div class="button-item" id="2">2</div> 
 
    <div class="button-item" id="3">3</div> 
 
    <div class="button-item" id="minus">-</div> 
 
    <div class="button-item" id="0">0</div> 
 
    <div class="button-item" id="point">.</div> 
 
    <div class="button-item" id="equal">=</div> 
 
    <div class="button-item" id="plus">+</div> 
 
</div>

나는 다음 D2-내용 - 요소 내부의 텍스트를 정렬하고 싶습니다. 나는 이미 테이블을 사용하려고 시도했지만 바닥에 정렬하는 것이 가능하지만 워드 랩은 더 이상 작동하지 않습니다. 어떤 제안?

Answer 1

이동할 내용에 position:absolute을 추가하십시오. 그리고 부모 요소에 position:relative을 추가하십시오.

.container { 
 
    margin: auto; 
 
    border-radius: 25px; 
 
    width: 320px; 
 
    height: 480px; 
 
    background-color: lightgrey; 
 
    background-image: url("https://raw.githubusercontent.com/zumartic/calculator/master/calculator.jpg"); 
 
    box-shadow: 10px 10px 5px #888888; 
 
} 
 

 
.head { 
 
    width: 320px; 
 
    height: 45px; 
 
    color: yellow; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
.display1 { 
 
    width: 320px; 
 
    height: 45px; 
 
    font-size: 200%; 
 
    font-weight: bold; 
 
    margin-left: -5px; 
 
    text-align: right; 
 
} 
 

 
.display2 { 
 
    width: 320px; 
 
    height: 90px; 
 
    position:relative; 
 
} 
 

 
#D2-content { 
 
    width: 320px; 
 
    font-size: 200%; 
 
    word-wrap: break-word; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    margin-left: -1px; 
 
    
 
    position:absolute; 
 
    bottom:0; 
 
    }

<div class="container"> 
 
    <div class="head" id="head">FCC Calculator</div> 
 
    <div class="display1" id="display1"></div> 
 
    <div class="display2" id="display2"><div id="D2-content">0</div></div><hr> 
 
    <div class="button-item" id="CE">CE</div> 
 
    <div class="button-item" id="C">C</div> 
 
    <div class="button-item"> </div> 
 
    <div class="button-item"> </div> 
 
    <div class="button-item" id="7">7</div> 
 
    <div class="button-item" id="8">8</div> 
 
    <div class="button-item" id="9">9</div> 
 
    <div class="button-item" id="divide">/</div> 
 
    <div class="button-item" id="4">4</div> 
 
    <div class="button-item" id="5">5</div> 
 
    <div class="button-item" id="6">6</div> 
 
    <div class="button-item" id="multiply">*</div> 
 
    <div class="button-item" id="1">1</div> 
 
    <div class="button-item" id="2">2</div> 
 
    <div class="button-item" id="3">3</div> 
 
    <div class="button-item" id="minus">-</div> 
 
    <div class="button-item" id="0">0</div> 
 
    <div class="button-item" id="point">.</div> 
 
    <div class="button-item" id="equal">=</div>           
 
    <div class="button-item" id="plus">+</div> 
 
</div>