이미지의 배경 텍스트를 가운데에 맞추는 방법

Question

제목에는 거의 텍스트가 들어있는 이미지가 있습니다. 그리고 저는 항상 수평과 수직으로 항상 중심에두고 싶습니다. 지금 나는

headerText: { 
    position: absolute; 
    top: 40%; 
    left: 5%; 
} 

과 함께하고 있지만 다른 해상도에서는 작동하지 않는 것 같습니다. 그렇다면이 레이아웃을 달성하는 다른 방법이 있습니까? 웹 사이트에

Link는 사업부에 텍스트를 넣어 또는 당신이 쉽게를 중앙에 정렬 할 수 있습니다 확장 할 수있는 경우

Answer 1

대안은 .headerText 스타일에 다음 CSS를 추가하는 것입니다 도움이

width: 100%; 
text-align: center; 
left: 0; 

희망.

Answer 2

(노란색 헤더는 내가 가운데에 맞출 텍스트입니다). 발굴과 함께, 당신은 MEED 모두

margin: auto 

Answer 3

그냥과 같이, 이미지 태그를하기 전에 범위를 이동할 수 있습니다 :

<div class="header"> 
    <span class="headerText">Ubytovna Stavařov Přerov</span>´ 
    <img src="css/title578145459.png" class="headerImage left"> 
    <img src="css/title756941752.png" class="headerImage right">    
</div> 

당신은 텍스트 CSS를

.headerText { 
    float: left; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    top: 40%; 
    z-index: 1; 
    color: yellow; 
    font: bolder 6em justus; 
    font-style: oblique; 
} 

할 필요가 헤더 그 그것을해야합니다. 그것을해야

Answer 4

:

headerText: { 
    position: absolute; 
    top: 40%; 
    left: 5%; 
    margin: auto; 
} 

Answer 5

첫째 : headerText 후 콜론 제거해야합니다. 둘째 : 나는 headerText 가정 클래스 선택, 그래서 당신은이 .

headerText에 내가 background-image으로 이미지를 설정하는 것이 좋습니다 앞에 추가해야합니다.

.headerText { 
    background-image: url(path/to/your/image.png) 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

을하지만 이미지가 페이지의 내용의 일부가 있는지 여부에 따라 달라집니다 또는 그것은 단지 디자인/스타일 : 그럼 당신은 그런 다음 을 할 수 있습니다. 이 솔루션은 후자의 경우에만 의미가 있습니다.

Answer 6

세로 중심에 대한 간단한 수정.

.headerText{ 
    position:absolute; 
    top:0px; 
    line-height:190px; 
} 

머리글 단어 줄 바꿈 위치에 따라 서로 다른 해상도의 높이를 수정해야합니다은 - 포장, 대규모 라인 높이가 아주 나쁜 보인다. 수평 중심

는 꽤 빠르다 :

.headerText{ 
    position:absolute; 
    left:0px; 
    right:0px; 
    text-align:center; 
} 

모두 함께 지금 :

.headerText{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    line-height:190px; 
    text-align:center; 
}