«vertical-alignment» 태그된 질문

일반적으로 수직면의 인터페이스 항목 배치와 관련된 스타일 또는 기타 UI 정의입니다.

30
div 안에 이미지를 세로로 정렬하는 방법
이미지를 포함하는 이미지 안에 어떻게 정렬 할 수 div있습니까? 예 내 예제에서는 수직 가운데 놓아야 <img>에서을 <div>로 class ="frame" <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frame의 높이는 고정되어 있으며 이미지의 높이를 알 수 없습니다. 그것이 .frame유일한 해결책이라면 새로운 요소를 추가 할 수 있습니다 . Internet Explorer 7 이상, …
30
모든 브라우저에서 div를 세로로 가운데에 배치하는 방법은 무엇입니까?
divCSS를 세로 로 가운데에 맞추고 싶습니다 . 테이블이나 JavaScript는 원하지 않지만 순수한 CSS 만 필요합니다. 일부 솔루션을 찾았지만 모두 Internet Explorer 6 지원이 누락되었습니다. <body> <div>Div to be aligned vertically</div> </body> divInternet Explorer 6을 포함한 모든 주요 브라우저에서 세로로 가운데를 맞추는 방법은 무엇입니까?
30
div에서 텍스트를 세로로 정렬하려면 어떻게합니까?
텍스트를 div와 정렬하는 가장 효과적인 방법을 찾으려고합니다. 나는 몇 가지 시도를했지만 아무것도 작동하지 않는 것 같습니다. .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } <div class="testimonialText"> Lorem …
25
div의 내용을 아래쪽에 맞추는 방법
다음 CSS 및 HTML 코드가 있다고 가정 해보십시오. #header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> 코드 스 니펫 실행결과 숨기기스 니펫 확장 헤더 섹션의 높이는 고정되어 있지만 헤더 내용은 변경 될 수 있습니다. 헤더의 내용이 헤더 섹션의 하단에 수직으로 정렬되도록 텍스트의 …
28
div에서 요소를 세로로 정렬하는 방법은 무엇입니까?
두 개의 이미지와 div가 h1있습니다. 그들 모두는 div 내에서 서로 옆에 수직으로 정렬되어야합니다. 이미지 중 하나를 absolutediv 내에 배치 해야합니다 . 모든 공통 브라우저에서 작동하려면 CSS가 무엇입니까? <div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>
10
Bootstrap에서 컨테이너를 세로로 가운데에 배치하는 방법은 무엇입니까?
containerdiv 를 세로로 jumbotron가운데에 배치하고 페이지 중간에 div 를 설정 하는 방법을 찾고 있습니다. 은 .jumbotron화면의 전체 높이와 폭에 적응되어야한다. .containerDIV은의 폭을 갖는 1025px상기 페이지 (수직 중심)의 중앙이어야한다. 이 페이지에서 점보트론이 수직으로 중앙에있는 컨테이너와 함께 화면의 높이와 너비에 맞춰 점보트론을 갖기를 원합니다. 어떻게하면 되나요? .jumbotron { height:100%; width:100%; } .container …
8
부모 컨테이너의 높이 백분율로 여백 또는 패딩을 설정하는 방법은 무엇입니까?
나는 다음을 사용하여 CSS에서 수직 정렬을 만드는 것에 대해 내 두뇌를 쌓아 두었다. .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } <!-- and used the following div structure. --> <div class="base"> <div class="vert-align"> Content Here </div> </div> 코드 스 니펫 실행결과 숨기기스 니펫 확장 이것이이 경우에는 효과가있는 …
7
Android : 여러 줄의 EditText (텍스트 영역)에 대한 세로 정렬
텍스트 영역의 높이에 5 줄을 갖고 싶습니다. 다음 코드를 사용하고 있습니다. <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines="5" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" /> 텍스트 영역은 문제가 없지만 텍스트 필드 중간에 커서가 깜박이는 것이 문제입니다. 텍스트 필드의 첫 문자에서 첫 번째 줄에서 깜박이기를 원합니다.
30
<hr />와 같은 줄의 중앙에 텍스트를 추가하십시오
xhtml 1.0의 어떤 옵션이 텍스트의 양면에 선을 만들기 위해 엄격한 지 궁금합니다. 섹션 1 ----------------------- 다음 섹션 ----------------------- 섹션 2 나는 다음과 같은 멋진 일을 생각했습니다. &lt;div style="float:left; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt; &lt;div style="float:right; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt; Next section 또는 위의 정렬에 문제가 있기 때문에 (수직 및 수평 모두) : &lt;table&gt;&lt;tr&gt; &lt;td style="width:47%"&gt;&lt;hr/&gt;&lt;/td&gt; …
13
Twitter Bootstrap을 사용하여 수직 공백을 추가 하시겠습니까?
트위터의 부트 스트랩을 사용하여 수직 공백을 추가하는 가장 좋은 방법은 무엇입니까? 예를 들어 방문 페이지를 만들고 특정 버튼 위와 아래에 약간의 빈 공백을 원한다고 가정 해 봅시다. 분명히, 나는 그 특정 버튼에 대한 특정 클래스를 만들 수 있습니다. 그러나 부트 스트랩 에는 수직 공백을 추가 하는 DRY 방법이 있어야한다고 생각 …
9
div 내에서 가변 높이로 콘텐츠를 세로로 가운데 맞추는 방법은 무엇입니까?
내용의 높이가 가변적 일 때 div의 내용을 세로로 가운데 맞추는 가장 좋은 방법은 무엇입니까? 내 특별한 경우에는 컨테이너 div의 높이가 고정되어 있지만 컨테이너의 높이가 가변적 인 경우 해결책이 있다면 좋을 것입니다. 또한 CSS 해킹 및 / 또는 비의 미적 마크 업을 사용하지 않거나 거의 사용하지 않는 솔루션을 원합니다.
9
절대적으로 위치한 부모 div 안에 div를 세로로 가운데에 배치하는 방법
분홍색 컨테이너 중간에 파란색 컨테이너를 얻으려고하지만 vertical-align: middle;그 경우에는 효과가없는 것 같습니다 . &lt;div style="display: block; position: absolute; left: 50px; top: 50px;"&gt; &lt;div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"&gt; &lt;div style="background-color: lightblue;"&gt;test&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 결과: 기대: 어떻게 달성 할 수 있는지 제안하십시오. JS 피들
5
SVG에서 텍스트 요소의 수직 정렬
SVG 파일이 있다고 가정 해 보겠습니다. &lt;svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;text x='20' y='60' style="font-size: 60px"&gt;b&lt;/text&gt; &lt;text x='100' y='60' style="font-size: 60px"&gt;a&lt;/text&gt; &lt;/svg&gt; 어떻게 든의 상단을 정렬 할 a및 b. 실제로, 내 위치 roofline가 baseline! 대신에 따르기를 원합니다 !
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.