텍스트 줄에 인라인 블록을 세로로 정렬하는 방법은 무엇입니까?

136

너비와 높이를 알 수없는 인라인 블록을 만들고 싶습니다. (동적으로 생성 된 내용이 담긴 테이블이 있습니다). 또한 인라인 블록은 "my text (BLOCK HERE)"와 같은 텍스트 줄 안에 배치해야합니다. 예쁘게 보이게 하기 위해 블록을 세로로 중앙에 배치하려고합니다 . 따라서 블록이 다음과 같은 경우

TOP
MIDDLE
BOTTOM

그런 다음 텍스트 줄에 "나의 텍스트 ([MIDDLE])"가 표시됩니다 (위와 아래 줄이 위와 아래에 있음)

여기까지 내가 가진 것입니다.

CSS

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

HTML

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

html vertical-alignment css

— 제프
소스

5

어쩌면 그것을 그려서 원하는 이미지를 게시 할 수 있습니다. 어쩌면 나일지도 모르지만, 당신이 무엇을 요구하는지 전혀 모른다.

— 브렌트 Friar

168

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

스 니펫 확장

Safari 5 및 IE6 +에서 테스트 및 작동합니다.

— 미다스
소스

비슷한 문제에 대한 솔루션을 사용했지만 CSS Triangle을 중심으로하려고합니다. 그러나 중심이 아닙니다. 레시피에 무엇을 추가하여 완전히 중앙에 만들 수 있습니까?

— CodyBugstein

@Imray 위치 : 상대?

— Nino Škopac

23

display: inline-block 당신의 친구는 당신이 하나의 구성 요소 (전, "블록", 후)를 세 부분으로 모두 필요로하는 것입니다.

작업 예

(어쨌든 사진처럼 보입니다.)

CSS :

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML :

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>

— 클레어 수지
소스