ReactJS에서 적절한 방식으로 텍스트 정렬
카림 아부 엘 나가
저는 HTML / CSS를 처음 접합니다. Modal을 사용하여 팝업 창을 만들었는데 이제 조정하려고합니다. 또한 다음과 같은 CSS 스타일 시트를 사용하고 있습니다.
.scoreboard {
position: absolute;
width: 300px;
height: 200px;
left: 450px;
top: 100px;
background: gold;
mix-blend-mode: normal;
border: 2px solid #25282B;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
text-align: center;
}
그러면 실제 모달은 다음과 같습니다.
<Modal
isOpen={this.state.isModalOpen}
onRequestClose={() => this.closeModal()}
className={'scoreboard'}
contentLabel="Example Modal"
>
{this.state.players.map(p => (
<div>
<p>Player: {p.username} Points:{p.points}</p>
</div>
))}
</Modal>
이제 보시다시피 플레이어 이름과 점수를 잘 정렬하여 모든 텍스트가 .scoreboard 중간에 올바르게 정렬되도록합니다. 그러나 현재는 다음과 같이 보입니다.
점수 판 중간에 배치되고 동일한 들여 쓰기 등을 갖도록 텍스트를 정렬하는 가장 좋은 방법은 무엇입니까?
미리 감사드립니다.
Yousaf
점수 판 중간에 배치되고 동일한 들여 쓰기 등을 갖도록 텍스트를 정렬하는 가장 좋은 방법은 무엇입니까?
flexbox를 사용하면 컨테이너의 요소를 쉽게 정렬 할 수 있습니다.
.scoreboard {
background: yellow;
width: 250px;
height: 250px;
border: 1px solid;
/* FLEXBOX */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.scoreboard p {
margin: 3px 0;
}
.scoreboard div span {
width: 80px;
display: inline-block;
padding-right: 5px;
}<div class="scoreboard">
<div>
<p><span>Player: 1</span> Points: ()</p>
</div>
<div>
<p><span>Player: 1</span> Points: ()</p>
</div>
<div>
<p><span>Player: Bot</span> Points: ()</p>
</div>
<div>
<p><span>Player: Bot</span> Points: ()</p>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
적절한 정렬로 MS Word에 붙여 넣을 텍스트 준비
- 2
적절한 방식으로 이미지 내부의 레이블 텍스트 정렬 -LibGdx
- 3
JS에서와 동일한 방식으로 C #에서 텍스트 직렬화
- 4
전체 텍스트 인덱싱 PHP에서 적절한 정렬 표시
- 5
쉘 스크립트에서 적절한 정렬로 라인을 재구성하는 방법
- 6
텍스트에서 적절한 PHP 배열 구조를 만들기위한 정규식
- 7
Xamarin : 프로그래밍 방식으로 TextView에 대한 텍스트 설정
- 8
부트 스트랩 4에서 div 사이에 적절한 공간을 정렬하는 방법
- 9
적절한 allign으로 텍스트 파일에 쓰기
- 10
ASCIIMath를 사용하여 선형 방정식 시스템에서 적절한 순서로 변수를 정렬하는 방법
- 11
RPM .spec에서 SELinux 컨텍스트를 설정하는 적절한 방법은 무엇입니까?
- 12
Flutter에서 한 줄의 텍스트로 텍스트를 2 줄로 정렬하는 방법
- 13
서식을 포함한 요소 텍스트를 동적으로 설정
- 14
ggplot에서 값으로 축을 재정렬 한 후 축 텍스트를 변경하는 방법
- 15
Excel에서 동적으로 추가 된 텍스트 상자 서식 지정
- 16
오라클 양식의 테이블에서 텍스트 항목의 텍스트를 동적으로 설정
- 17
XML 스키마에서 정규식의 적절한 구문
- 18
ABAP에서 정규식의 적절한 이스케이프
- 19
SQL-시간순으로 정렬 한 다음 처음에 텍스트
- 20
원 안에 텍스트를 동적으로 정렬하는 방법은 무엇입니까?
- 21
Java에서 거대한 텍스트 파일을 효율적으로 읽고 내용을 분할하여 정렬하는 방법은 무엇입니까?
- 22
자식 div에서 텍스트를 정렬하는 방법
- 23
이 두 텍스트에 대해 동일한 정렬을 설정하는 방법
- 24
텍스트가 적을 때 텍스트를 이미지 가운데에 세로로 정렬
- 25
Bokehs HoverTool / tooltips 내에서 텍스트 정렬 서식 지정-Python
- 26
루프에서 텍스트 서식 지정 / 정렬
- 27
ScrollView에서 텍스트를 행간으로 정렬-SWIFTUI
- 28
Notepad ++에서 값을 기준으로 텍스트 정렬
- 29
JasperReports를 적절한 정렬로 Excel 형식으로 가져 오는 방법
몇 마디 만하겠습니다