큰 텍스트를 버튼 옵션으로 맞 춥니 다.

Question

퀴즈를 만들려고 노력하고 있는데, 모든 것을 정당화 할 수 없을 때, 내 JsFiddle을보십시오.

HTML

  <div id="1" class="option"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dolor nisi. Sed dui lacus, placerat eget hendrerit ut, pellentesque ut arcu. Suspendisse sagittis nisi sapien, vitae porta odio gravida eu.</p></div> 
      <div id="2" class="option"><p>Suspendisse suscipit velit a enim porta ultricies. Vivamus sit amet purus in sapien euismod congue eu at felis. Nulla vehicula rutrum elit, et congue libero cursus at. Phasellus eu nisi nec mi volutpat eleifend. Curabitur sollicitudin laoreet augue vitae egestas</p></div> 
      <div id="3" class="option"><p>Duis ut ante elit. Vestibulum varius et tellus ac condimentum. Nam scelerisque faucibus massa, sed molestie mauris convallis et. Duis luctus lobortis quam et varius.</p></div> 

CSS

   .option{width:400px; 
       height:200px; 
       margin:15px; 
       font-size:18px; 
       color:#FFFFFF; 
       padding:2px; 
       padding-left:10px; 
       border: 2px solid white; 
       cursor:pointer; 
       background-color:#3399FF; 
       line-height: 200px; 
       text-align: center; 
       white-space: normal; 
       } 

       .option:hover{ 
       border:#FC0 solid 2px; 
       color:#FC0; 
       } 

감사합니다!

Answer 1

당신의 스타일 높이, 라인 높이에서 떨어져 넣고 정당화하기 위해 텍스트 정렬을 설정

 .option{width:400px; 
      margin:15px; 
      font-size:18px; 
      color:#FFFFFF; 
      padding:2px; 
      padding-left:10px; 
      border: 2px solid white; 
      cursor:pointer; 
      background-color:#3399FF; 
      text-align: justify; 
      white-space: normal; 
      } 

      .option:hover{ 
      border:#FC0 solid 2px; 
      color:#FC0; 
      }