CSS 슬라이딩 도어가있는 가운데 맞춤 표제어

Question

슬라이딩 도어 기술 here에 문제가 있습니다. 설명 바로 뒤에 나오는 제목은 슬라이딩 도어 기술로 인해 떠 다니는 것이지만, 내가 원한 것은 제품 위의 중심에 혼자 있다는 것입니다.

어떻게하는지 이해하는 데 도움을 줄 수 있습니까?

h3.offer-title, h3#comments, h3#reply-title { 
background:url(images/offer-title-bg.png) no-repeat right bottom; 
color:#434343; 
display:block; 
float:left; 
font-size: 14px; 
margin-right: 6px; 
padding-right:6px; 
text-decoration:none; 
height: 43px; 
line-height: 0; 
position: relative; } 

h3.offer-title span, h3#comments span, h3#reply-title span { 
background:url(images/offer-title-bg.png) no-repeat; 
display:block; 
padding-left: 20px; 
height: 43px; 
line-height: 43px; 
padding-right: 16px; 
} 

감사합니다 : 여기

내가 제목에 사용되는 CSS입니다.

Answer 1

첫 번째 CSS 코드 블록에 float: left을 설정했기 때문에 부유합니다. 그 행동을 없애기 위해서 당신은 플로트를 제거해야합니다.

float가 사라지면 헤더의 배경을 이전과 같이 텍스트에 잘 맞게 만들려면 요소에 display: inline-block이 있어야합니다.

그러나 헤더에 너비를 추가하지 않아도됩니다 (너비를 추가 할 수 있지만 텍스트 나 글꼴 크기를 변경하려면 깨질 수 있음). 가운데 맞춤이 아닙니다. 중앙에 오려면 text-align: center 인 래퍼 요소가 필요합니다.

그래서 :

h3.offer-title { 
    display: inline-block; /* this makes the bg fit the text */ 
    float: none; /* this overrides float:left */ 
} 

랩 다른 사업부에서 offer-title 요소 :

1. 이 블록을 추가합니다.

2. 스타일

   .offer-title-wrapper { 
       text-align: center; 
   }