css h1-텍스트 너비 만

내 사이트에 H1 스타일이 있습니다.

.centercol h1 {
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

배경색은 centercol의 전체 너비, 500px에 걸쳐 있습니다.

이 H1을 H1의 텍스트 너비에만 확장하려면 어떻게해야합니까?

표시를 위해 인라인 블록 값을 사용할 수 있지만이 경우 h1의 블록 기능을 잃게됩니다. 즉, 형제가 인라인 요소 인 경우 h1과 함께 인라인으로 표시됩니다 (이 경우 줄 바꿈을 사용할 수 있음
).

display:inline-block; 

.h1 {
  width: -moz-fit-content;
  width: fit-content;

  // workaround for IE11
  display: table;
}

모든 최신 브라우저는이를 지원 width: fit-content합니다.

IE11의 경우 또는 display: table처럼 여백 붕괴를 중단하지 않는 이 동작을 에뮬레이션 할 수 있습니다.display: inline-blockfloat: left

display:inline-block이 동작을 강제 하는 데 사용할 수 있습니다.

이에 대한 쉬운 해결 방법은 H1 요소를 왼쪽으로 띄우는 것입니다.

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

좀 더 일반적인 대답을 찾는 사람을 위해 H1 요소의 너비에 "float : left"스타일의 효과를 보여주는 간단한 jsfiddle 예제를 작성했습니다.

http://jsfiddle.net/zmEBt/1/

이것은 당신 <h1> 이 centercol의 너비 이기 때문 입니다. 너비를 지정하고 중앙에 배치 <h1>하려면 사용 margin: 0 auto;하십시오.

또는를 플로팅 <h1>하여 텍스트 너비 만 정확히 만들 수 있습니다.

나는 최근에 표 캡션을 사용 하여이 문제를 해결했지만 권장 여부는 말할 수 없습니다. 다른 답변은 제 경우에는 운동하지 않는 것 같습니다.

h1 {
  display: table-caption;
}

다른 제안과 비슷하게 다음 코드를 사용할 수 있습니다. 그러나 여백으로 가면 : 0 auto; route H1의 상단과 하단에 대한 여백을 0이 아닌 다른 값으로 설정하는 것이 좋습니다. 따라서 여백 : 6px auto; 또는 뭔가.

.centercol h1{
    display: inline-block;
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

flexbox에서 align-self-start, align-self-center ...

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    align-self: center;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

당신은 사용할 수있는 <span>대신의를 <h1>.