Solid Border Bottom에 텍스트를 추가하는 방법은 무엇입니까?

Question

나는 우리 사회를 재 설계 담당 넣어 봤는데 현재이는 http://core2062.com/sponsors/처럼 보이는 지금은 Flexboxes 사용하여 재 설계 한 것입니다 페이지를 스폰서 : ... https://diedrich.co/img/uploads/de9ea0e2569a8051f8703c99d637f85b.jpg

내 질문은을 어떻게 배치해야합니까 각 이미지 주위에 만든 아래쪽 테두리의 텍스트?

Answer 1

테두리에 텍스트를 넣을 수 없습니다.

배경색이있는 요소를 만들고 텍스트를 테두리 위에 놓거나 텍스트의 절대 위치에 놓을 수 있습니다.

Answer 2

테두리에 텍스트를 넣을 수 없습니다. 텍스트를 유지하는 요소에 배경 색상을 사용하고

Demo

HTML

<div class="border"> 
    <h1>Diamond Sponsors</h1> 
</div> 

CSS

.border { 
    background-color: black; 
    color:white; 
    border-top:5px solid orange; 
    text-align:center; 
}