css h1-텍스트 너비 만

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; 

---

사용 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>하여 텍스트 너비 만 정확하게 만들 수 있습니다.

---

다른 제안과 비슷하게 다음 코드를 사용할 수 있습니다. 그러나 여백으로 가면 : 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>.

참고 URL : https://stackoverflow.com/questions/4566100/css-h1-only-as-wide-as-the-text