H2 Span을 DIV의 중심에 수직으로 정렬

debugcn 에 게시 Dev

vik1245

DIV 중간을 따라 '내 캡션'이라고 표시된 h2 범위를 세로로 정렬하려고합니다.

나는 사용하려고 vertical - align했지만 그 속성은 사진의 위치를 바꾸지 않았다.

부트 스트랩을 사용하고 있는데 문제는 페이지 창이 작아지면 현재 가장 많이 작동하는 상대 위치로 인해 텍스트가 사라진다는 것입니다.

.imageInside { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 {
   line-height:100px; 
   vertical-align:middle; 
   position: absolute; 
   top: 0; 
   left: 10; 
   width: 100%; 
}

h2 {
	z-index:1;
}

h2 span { 
   color: white; 
   font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
	<head>
		<title>Tutorial</title>
		<!-- Tab Title -->
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
		<!-- 960 Grid -->
		
		<style>
		.imageInside { 
		   position: relative; 
		   width: 100%; /* for IE 6 */
		}

		h2 {
		   line-height:100px; 
		   vertical-align:middle; 
		   position: absolute; 
		   top: 0; 
		   left: 10; 
		   width: 100%; 
		}

		h2 {
			z-index:1;
		}

		h2 span { 
		   color: white; 
		   font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif; 
		   letter-spacing: -1px;  
		   background: rgb(0, 0, 0); /* fallback color */
		   background: rgba(0, 0, 0, 0.7);
		   padding: 10px; 
		} 
		</style>
		
	</head>
	<body>
		
		<div class="container">
			
			<div class = "row">

				<div class="imageHolder col-md-12 middle" style="margin-top:10px;"> 

					<div class = "imageInside hvr-underline-from-center" >
						<img id = "imageHomeJPG" src="http://bit.ly/1lhHK4t" style="width:100%" />
						<h2><span>My Caption.</span></h2>
					</div>

    			</div>	
			</div>	
			
			</div>
			
		</div>
	</body>
	</html>

실제 결과를 보려면 전체 화면으로 스 니펫을보십시오.

다음 튜토리얼을 사용했습니다. https://css-tricks.com/text-blocks-over-image/

고마워, 데이비드.

Jagadeesh J

이것이 당신이 원하는 것입니다 : http://codepen.io/anon/pen/yeLjVX

트릭은 변형 속성에서 나옵니다!

 h2 {

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-6

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

H2 Span을 DIV의 중심에 수직으로 정렬

H2 Span을 DIV의 중심에 수직으로 정렬

DIV 내부에서 SPAN을 수직 및 수평으로 정렬하는 방법

절대 위치 div에서 버튼을 수직으로 정렬

Bootstrap3-h2 내에서 레이블을 수직으로 정렬

H1에서 SPAN의 수직 정렬

h2를 수직으로 하단 정렬

h2와 버튼을 수평으로 정렬 할 수 없습니다.

버튼을 h3 태그의 오른쪽에 정렬하고 수직으로 정렬하려면 어떻게해야합니까?

div의 동일한 basline에 h2와 p를 정렬하는 방법

div 컨테이너 내부의 h2를 오른쪽으로 정렬 할 수 없습니다.

div 컨테이너 내부의 h2를 오른쪽으로 정렬 할 수 없습니다.

자식 div를 부모 div의 하단에 수직으로 정렬하고 자식을 부모 높이의 백분율로 설정합니다.

유연한 높이로 2 개의 플로팅 div를 수직으로 정렬

고정 div의 수직 중심

h2에서 하나의 쿼리로 중복을 제거하는 방법

UL을 div 상단에 수직 정렬

부모 div 안에 2 개의 div를 수평으로 정렬하는 방법

Div 내부의 Span을 상단에 정렬

div 내에서 링크를 수직으로 정렬

DIV를 가운데에 수직으로 정렬

div에서 다른 요소와 수직으로 정렬

div에서 링크와 버튼을 수직으로 정렬하는 방법은 무엇입니까?

테이블의 중앙 이미지 및 H2 수직

LinearLayout 내에서 2 개의 TextView를 수직으로 정렬 할 수 없습니다.

<h2> 전체 너비이기 때문에 여백 자동으로 중앙 정렬되지 않음

수평 div를 수직으로 정렬

하나의 <p> 안에 2 개의 다른 글꼴 크기를 수직으로 정렬하는 방법

원점을 중심으로 반경 R 및 차원 D의 구 내부에서 정수 점의 수 찾기

하나가 imshow 플롯 인 경우 matplotlib에서 수직으로 두 개의 플롯을 정렬합니까?

Bootstrap을 사용하여 Near div로 이미지를 수직으로 정렬