텍스트 줄에 인라인 블록을 세로로 정렬하는 방법은 무엇입니까? 같은 텍스트 줄 안에 배치해야합니다. 예쁘게 보이게

너비와 높이를 알 수없는 인라인 블록을 만들고 싶습니다. (동적으로 생성 된 내용이 담긴 테이블이 있습니다). 또한 인라인 블록은 “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>

예

답변

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 +에서 테스트 및 작동합니다.

답변

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>

답변