html 및 CSS를 사용하여 두 요소의 중심 일치
Karansys
나는 CSS를 처음 접했고 폭이 다른 스팬 요소가 있습니다. 즉, 길이가 다른 내용이 있습니다 (예 : 9,56 및 90). 매번 선택 요소와 스팬 요소의 중심이 일치하는지 확인하고 싶습니다.
참고 : 미래에는 각 경우마다 다양한 길이의 범위를 가질 수 있으며 선택 및 범위의 중심이 자동으로 일치하기를 원합니다.
여기 내가 필요한 것의 사진이 있습니다 
현재 내가 가지고있는 것
.floatright {
position: absolute;
width: 500px;
height:500px;
right:0px;
top:0px;
}
select {
text-indent: 140px !important;
}
select option {
font-weight: bold !important;
}<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div class="floatright">
<select style="width:320px;">
<option>class 1</option>
<option>class 2</option>
<option>class 1</option>
<option>class 2</option>
<option>class 1</option>
<option>class 2</option>
</select>
<div>
<span>jefsyadlmu</span>
<br />
<br />
<br />
<br />
<span>uirkvcnyuimuamjkznvuozaeff</span>
<br />
<br />
<br />
<br />
<span>inwulpbkmnthllkpwdeygewehnpxaearnbmmzidtimcfvzrvwjfpodkinhybsneirbi</span>
<br />
<br />
<br />
<br />
</div>
</div>
<link rel="stylesheet" href="test.css"/>
</body>
</html> 로랑 S.
div{text-align:center;}CSS에 추가 하기 만하면 됩니다.
그러나 귀하의 HTML은 매우 잘못되었습니다. 당신이 사용 안하고 <span>와 <br>이를 달성하기 위해, 그것은 훨씬 더 사용하는 것 <p>'대신이야. 이렇게하면 문장 사이의 공간으로 원하는 픽셀 수를 정확하게 정의 할 수도 있습니다.
.floatright {
position: absolute;
width: 500px;
height:500px;
right:0px;
top:0px;
}
select {
text-indent: 140px !important;
}
select option {
font-weight: bold !important;}
div { text-align:center;}
p {margin-bottom:40px;}<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div class="floatright">
<select style="width:320px;">
<option>class 1</option>
<option>class 2</option>
<option>class 1</option>
<option>class 2</option>
<option>class 1</option>
<option>class 2</option>
</select>
<div>
<p>jefsyadlmu</p>
<p>uirkvcnyuimuamjkznvuozaeff</p>
<p>inwulpbkmnthllkpwdeygewehnpxaearnbmmzidtimcfvzrvwjfpodkinhybsneirbi</p>
</div>
</div>
<link rel="stylesheet" href="test.css"/>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
자바 스크립트를 사용하여 두 HTML 요소의 높이 일치
- 2
동일한 데이터를 사용하여 훈련 된 두 NN의 상당히 다른 "가중치"및 "편향"
- 3
Flexbox를 사용하여 첫 번째 요소는 맨 위에, 두 번째 및 세 번째 요소는 나머지 공간의 중앙에 배치하여 같은 열에 세 요소를 배치하려면 어떻게해야합니까?
- 4
C # : Linq 및 Lambda를 사용하여 두 컬렉션간에 일치하지 않는 요소 가져 오기
- 5
HTML 및 CSS의 중심 문제
- 6
이미지 HTML 및 CSS 중앙에 일종의 테두리를 배치합니다.
- 7
요소 중심을 사용한 CSS 위치와 백분율을 사용하여 요소 위치 지정
- 8
html 및 css를 사용하여 세 개의 원 아래에 텍스트 배치
- 9
CSS 또는 Jquery를 사용하여 데스크톱의 경우 절대 위치 및 모바일의 경우 상대 위치에 두 블록 배치
- 10
HTML5 및 Javascript를 사용하여 두 개의 텍스트 파일을 동시에 읽는 방법
- 11
중심 절대 위치 의사 요소
- 12
RegExp를 사용하여 html / xml 요소 일치 또는 찾기
- 13
Ansible- 키 일치를 사용하여 두 개의 중첩 된 json 파일을 단일 파일로 병합
- 14
OpenCV 및 Visual C ++를 사용하여 윤곽선의 중심 찾기
- 15
HTML 및 CSS를 사용하여 이미지를 Circle에 배치
- 16
CSS를 사용하여 HTML 및 SVG 요소를 정렬 할 수 없음
- 17
CSS를 사용하여 HTML 요소를 배치하는 모범 사례
- 18
HTML 및 CSS를 사용하여 소셜 미디어 태그를 중앙 정렬하는 방법
- 19
HTML 및 CSS를 사용하여 페이지 중간에 버튼을 배치하는 방법
- 20
Linux를 사용하여 두 파일의 숫자 일치
- 21
Python / Pandas : 일부 요소 일치를 사용하여 데이터 프레임의 모양 변경 및 병합
- 22
grep을 사용하여 두 번째 및 다섯 번째 열의 문자열 일치를위한 RegEx
- 23
XSLT를 사용하여 두 번째 요소의 중복 노드 제거
- 24
위치 절대 div 및 요소의 중심 위치
- 25
CSS / HTML에서 서로 인접한 두 요소를 중앙에 배치
- 26
HTML 및 CSS (SCSS)를 사용하여 그래픽 소스를 페이지 중간 지점으로 보정
- 27
CSS를 사용하여 절대 위치 요소를 자신의 위치 속성 위에 중앙에 배치
- 28
awk를 사용하여 두 파일을 병렬로 반복하고 일치 및 일치하지 않는 인쇄
- 29
일반 html, css, js를 사용하여 두 개의 플롯 차트간에 전환하는 방법
몇 마디 만하겠습니다