Pertanyaan Menyesuaikan teks secara vertikal di samping gambar?


Kenapa tidak mau vertical-align: middle kerja? Dan lagi, vertical-align: top  tidak kerja.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1684
2018-01-28 21:01


asal


Jawaban:


Sebenarnya, dalam hal ini cukup sederhana: menerapkan garis vertikal ke gambar. Karena semuanya dalam satu baris, itu benar-benar gambar yang Anda inginkan selaras, bukan teks.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Diuji dalam FF3.

Sekarang Anda dapat menggunakan flexbox untuk jenis tata letak ini.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1899
2018-01-28 21:10



Berikut beberapa teknik sederhana untuk perataan vertikal:

Satu-garis vertical-align: tengah

Yang ini mudah: atur tinggi baris elemen teks agar sama dengan wadah

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Multiple-lines vertical-align: bawah

Benar-benar memposisikan div dalam relatif terhadap wadahnya

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Multiple-lines vertical-align: tengah

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Jika Anda harus mendukung versi lama IE <= 7

Agar ini bekerja dengan baik di seluruh papan, Anda harus meretas CSS sedikit. Untungnya, ada bug IE yang bekerja menguntungkan kita. Pengaturan top:50% pada wadah dan top:-50% pada div dalam, Anda dapat mencapai hasil yang sama. Kita dapat menggabungkan keduanya menggunakan fitur lain yang tidak didukung oleh IE: pemilih CSS lanjutan.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Tinggi kontainer variabel tinggi-align: tengah

Solusi ini memerlukan peramban yang sedikit lebih modern daripada solusi lainnya, karena memanfaatkannya transform: translateY milik. (http://caniuse.com/#feat=transforms2d)

Menerapkan 3 baris CSS berikut ke suatu elemen akan memusatkan secara vertikal di dalam induknya terlepas dari tinggi elemen induk:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



Ubah-Mu div ke dalam wadah fleksibel:

div {display:flex;}


Sekarang ada dua metode untuk memusatkan keberpihakan untuk semua konten:

Metode 1:

div {align-items:center;}

DEMO 


Metode 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO 


Coba lebar dan tinggi nilai yang berbeda pada img dan nilai ukuran font yang berbeda pada span dan Anda akan melihat mereka selalu berada di tengah-tengah wadah.


79
2018-03-24 07:54



Anda harus mendaftar vertical-align: middle ke kedua elemen untuk membuatnya terpusat sempurna.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

Itu jawaban yang diterima Apakah pusatkan ikon sekitar setengah dari tinggi x dari teks di sebelahnya (sebagaimana didefinisikan dalam Spesifikasi CSS). Yang mungkin cukup bagus tetapi dapat terlihat sedikit, jika teks memiliki ascenders atau keturunan berdiri di atas atau bawah:

centered icon comparison

Di sebelah kiri, teks tidak sejajar, di sebelah kanan seperti yang ditunjukkan di atas. Demo langsung dapat ditemukan di sini artikel tentang perataan vertikal.

Apakah ada yang berbicara tentang mengapa vertical-align: top bekerja dalam skenario? Gambar dalam pertanyaan itu mungkin lebih tinggi dari teks dan dengan demikian mendefinisikan tepi atas kotak garis. vertical-align: top pada elemen rentang kemudian hanya memposisikannya di bagian atas kotak garis.

Perbedaan utama dalam perilaku antara vertical-align: middle dan top adalah bahwa elemen bergerak pertama relatif terhadap baseline kotak (yang ditempatkan di mana saja diperlukan untuk memenuhi semua keberpihakan vertikal dan dengan demikian terasa agak tidak bisa diprediksi) dan yang kedua relatif terhadap batas luar kotak garis (yang lebih nyata).


68
2017-09-11 12:58



Teknik yang digunakan dalam jawaban yang diterima hanya berfungsi untuk teks satu baris (demo), tetapi tidak multi-baris teks (demo) - sebagaimana dicatat di sana.

Jika ada yang perlu secara vertikal memusatkan teks multi-garis ke sebuah gambar, berikut beberapa cara (Metode 1 dan 2 terinspirasi oleh artikel CSS-Trik ini)

Metode # 1: tabel CSS (BIOLA) (IE8 + (kaniuse))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Metode # 2: Elemen semu pada penampung (BIOLA) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Metode # 3: Flexbox (BIOLA) (kaniuse)

CSS (Biola di atas mengandung awalan vendor):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



Kode ini berfungsi di IE dan juga FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Karena Anda harus mengaturnya line-height ke ketinggian div agar ini berfungsi


16
2018-01-28 21:05



Pada dasarnya, Anda harus masuk ke CSS3.

-moz-box-align: center;
-webkit-box-align: center;

9
2017-11-29 18:24



Sebagai catatan, keselarasan "perintah" seharusnya tidak bekerja pada SPAN, karena itu adalah sebuah Di barisan tag, bukan tingkat blok menandai. Hal-hal seperti penyelarasan, margin, padding, dll tidak akan berfungsi pada tag in-line karena titik inline tidak mengganggu aliran teks.

CSS membagi tag HTML menjadi dua grup: in-line dan block-level. Cari "css block vs inline" dan artikel bagus muncul ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Memahami prinsip-prinsip inti CSS adalah kunci untuk tidak begitu menyebalkan)


8
2017-11-18 13:24