Làm cách nào để căn chỉnh một khối nội tuyến trong một dòng văn bản?

136

Tôi muốn tạo một khối nội tuyến sẽ đảm nhận một số chiều rộng và chiều cao không xác định. (Nó sẽ có một bảng bên trong nó với nội dung được tạo động). Hơn nữa, khối nội tuyến nên được đặt bên trong một dòng văn bản, chẳng hạn như "văn bản của tôi (BLOCK TẠI ĐÂY)". Để làm cho nó trông đẹp hơn, tôi đang cố gắng làm cho khối được căn giữa theo chiều dọc . Vì vậy, nếu khối trông như thế này:

TOP
MIDDLE
BOTTOM

Sau đó, dòng văn bản sẽ đọc: "Văn bản của tôi ([TRUNG CẤP])" (với TOP và BOTTOM ở trên và bên dưới dòng)

Đây là những gì tôi có cho đến nay.

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>

Thí dụ

html vertical-alignment css

— Geoff
nguồn

5

Có thể vẽ nó lên và đăng một hình ảnh của những gì bạn muốn. Có thể đó là tôi, nhưng tôi không biết bạn đang hỏi gì.

— Brent 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>

Mở rộng đoạn trích

Đã thử nghiệm và hoạt động trong Safari 5 và IE6 +.

— Midas
nguồn

Tôi đã sử dụng giải pháp của bạn cho một vấn đề tương tự, nhưng tôi đang cố gắng tập trung vào Tam giác CSS. Tuy nhiên, nó không hoàn toàn tập trung. Tôi có thể thêm gì vào công thức của bạn để làm cho nó hoàn toàn tập trung?

— CodyBugstein

@Imray Position: tương đối?

— Nino Škopac

23

display: inline-block là bạn của bạn, bạn chỉ cần tất cả ba phần của cấu trúc - trước, "khối", sau - là một, sau đó bạn có thể sắp xếp theo chiều dọc tất cả chúng vào giữa:

Ví dụ làm việc

(dù sao nó cũng giống hình của bạn;))

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>

— thấu thị
nguồn