Luruskan teks di sebelah gambar secara vertikal?


Jawaban:


2253

Sebenarnya, dalam hal ini cukup sederhana: terapkan perataan vertikal ke gambar. Karena semuanya dalam satu baris, itu benar-benar gambar yang ingin Anda selaraskan, 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>


188
"Karena semuanya dalam satu baris, itu benar-benar gambar yang ingin Anda selaraskan, bukan teks." - Tidak, gambarnya baik-baik saja. Kami ingin teks disejajarkan. Bukan gambar. - Saya mengerti bahwa ini berfungsi (dalam beberapa keadaan, mis: ketika Anda tidak menggunakan "float: left" pada gambar ...), tetapi aneh dan tidak intuitif untuk memindahkan teks secara fisik ke vertikal tengah Anda harus menerapkan atribut ke gambar di sebelahnya saja.
BrainSlugs83

35
@ BrainSlug83 Ini tentu tidak aneh tapi saya bisa melihat bagaimana pendatang baru bisa tersandung oleh ini. Secara default gambar akan ditempatkan pada garis dasar teks. Yang Anda lakukan hanyalah bergerak di mana gambar dilampirkan relatif terhadap teks. Sedangkan untuk menggunakan float: left, Anda harus melakukan itu baik pada blok yang berisi gambar dan teks, atau pada teks itu sendiri.
jamesrom

14
@ BrainSlugs83 Setuju bahwa itu dapat dilihat sebagai kontra-intuitif. Dibutuhkan sedikit perubahan mental, karena menurut CSS, yang perlu Anda lakukan adalah memusatkan gambar ke teks. Bukan teks ke gambar.
Greg Pettit

6
Ini tidak berfungsi jika Anda menambah spanukuran font. Lihat jawaban saya .
Mori

2
Tetapi jika Anda mengatur ukuran gambar ke yang lebih kecil (seperti width:16px;height:16px), Anda dapat melihat gambarnya terlalu rendah ...
Matthieu Charbonnier

340

Berikut adalah beberapa teknik sederhana untuk meluruskan vertikal:

Garis vertikal satu garis: tengah

Ini mudah: atur ketinggian baris elemen teks agar sama dengan yang ada pada wadah

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

Multiple-lines vertical-align: bottom

Benar-benar posisikan div batin relatif ke 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 kuno IE <= 7

Agar ini berfungsi dengan benar, Anda harus sedikit meretas CSS. Untungnya, ada bug IE yang berfungsi untuk kita. Pengaturan top:50%pada wadah dan top:-50%pada div bagian dalam, Anda dapat mencapai hasil yang sama. Kita dapat menggabungkan keduanya menggunakan fitur lain yang tidak didukung IE: penyeleksi CSS tingkat lanjut.

<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 wadah variabel, luruskan vertikal: tengah

Solusi ini memerlukan peramban yang sedikit lebih modern daripada solusi lain, karena memanfaatkan transform: translateYproperti. ( http://caniuse.com/#feat=transforms2d )

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

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

15
The display:tabledan display:table-cellCSS bekerja besar, kecuali, tentu saja, di IE7 dan di bawah. Setelah mencabut rambut saya selama beberapa jam, saya memutuskan bahwa saya tidak benar-benar perlu berurusan dengan siapa pun yang masih menggunakan IE7-.
banncee

2
display:tablememiliki beberapa batasan di berbagai browser (di IE11 max-heighttidak berfungsi jika elemennya ada di dalam sel tabel), jadi dalam beberapa kasus tepi itu bukan ide yang baik untuk menyelaraskan secara vertikal menggunakan sel tabel.
jahu

97

Ubah Anda divmenjadi wadah fleksibel:

div { display:flex; }


Sekarang ada dua metode untuk memusatkan perataan untuk semua konten:

Metode 1:

div { align-items:center; }

DEMO


Metode 2:

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

DEMO


Coba nilai lebar dan tinggi berbeda pada imgdan nilai ukuran font berbeda pada spandan Anda akan melihat mereka selalu tetap di tengah wadah.


Untuk memusatkan teks di sebelah atau di antara gambar (horizontal pada halaman), Anda juga perlu menambahkan justify-content: center;dan untuk memberi jarak (tanpa menggunakan tag <br/>) Anda mungkin juga ingin memasukkan padding: 1em;. Pembaruan hebat bagi kami pengembang browser modern.
CSS

Ini bekerja dengan baik. Saya mencoba masing-masing dan semua orang dari jawaban yang lain, dan sementara mereka bekerja sampai tingkat tertentu, itu tidak berhasil bagi saya. Saya memiliki sekitar 3 baris teks untuk disejajarkan, dan jawaban ini bekerja dengan sempurna. Terima kasih @Mori
semaj0

87

Anda harus menerapkan vertical-align: middleke kedua elemen untuk membuatnya terpusat dengan sempurna.

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

The jawaban yang diterima tidak pusat ikon sekitar setengah dari x-height dari teks di samping itu (sebagaimana didefinisikan dalam spesifikasi CSS ). Yang mungkin cukup baik tetapi dapat terlihat sedikit aneh, jika teks memiliki ascenders atau descenders yang berdiri tepat di atas atau bawah:

perbandingan ikon terpusat

Di sebelah kiri, teks tidak sejajar, di sebelah kanan seperti pada gambar di atas. Demo langsung dapat ditemukan di artikel ini tentang perataan-vertikal .

Adakah yang pernah membicarakan mengapa ini vertical-align: topberhasil dalam skenario? Gambar dalam pertanyaan mungkin lebih tinggi daripada teks dan dengan demikian menentukan tepi atas kotak baris. vertical-align: toppada elemen span lalu posisikan saja di bagian atas kotak garis.

Perbedaan utama dalam perilaku antara vertical-align: middledan topadalah bahwa elemen bergerak pertama relatif terhadap garis dasar kotak (yang ditempatkan di mana pun diperlukan untuk memenuhi semua keberpihakan vertikal dan dengan demikian terasa agak tidak dapat diprediksi ) dan relatif kedua terhadap batas luar kotak garis (yang merupakan lebih nyata).


1
Saya perhatikan pekerjaan atas dan pekerjaan bawah tetapi tidak di tengah. Pada dasarnya "tengah" tidak didefinisikan sebagai setengah antara bagian atas dan bagian bawah. Ini lebih berarti "ketika lebih tinggi dari teks, julurkan keduanya dengan cara yang sama." Dan di sini Anda tidak perlu meluruskan vertikal: tengah pada teks sama sekali, hanya gambar.
Curtis

61

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

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

Metode # 1: Tabel CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Metode # 2: Elemen pseudo pada wadah ( FIDDLE ) (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 ( FIDDLE ) ( caniuse )

CSS (Biola di atas berisi awalan vendor):

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

3
Metode ini berfungsi dengan baik jika gambar lebih besar (tingginya) daripada teks. Tetapi jika gambar lebih kecil maka semua tapi yang terakhir sayangnya gagal
Thomas

28

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>

19

Karena Anda harus mengatur line-heightketinggian div agar ini berfungsi


2
Saya mencoba mengatur ketinggian garis ke 30px dan masih tidak berhasil.
sam

12

Pada dasarnya, Anda harus turun ke CSS3.

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

11

Sebagai catatan, penyelarasan "perintah" tidak boleh bekerja pada SPAN, karena ini adalah in-line tag , bukan tag level blok . Hal-hal seperti perataan, margin, bantalan, dll tidak akan berfungsi pada tag in-line karena titik inline tidak mengganggu aliran teks.

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

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

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


2
text-aligndan vertical-align(dengan pengecualian dari aplikasi pada tdelemen untuk tujuan warisan) secara khusus dimaksudkan untuk inlinedan inline-blockelemen ( span, img, dll).
Kevin Peno

11

Gunakan line-height:30pxuntuk rentang sehingga teks sejajar dengan gambar:

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

11

Hal lain yang dapat Anda lakukan adalah mengatur teks line-heightke ukuran gambar di dalam<div> . Kemudian atur gambar kevertical-align: middle;

Itu sungguh cara termudah.


3
Perhatikan bahwa ini tidak berfungsi dengan benar jika konten Anda tersebar di beberapa baris.
Ahmad Alfy

lalu mengapa tidak hanya garis-tinggi: 100%?
Jean Paul AKA el_vete

8

Belum melihat solusi dengan marginjawaban ini, jadi inilah solusi saya untuk masalah ini.

Solusi ini hanya berfungsi jika Anda tahu lebar gambar Anda.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

1
Ini solusi tepat. Ini berfungsi untuk teks multi-baris, juga ... Aboves tidak sesuai untuk multi-baris.
efirat

6
background:url(../images/red_bullet.jpg) left 3px no-repeat;

Saya biasanya menggunakan 3px sebagai pengganti top. Dengan menambah / mengurangi nilai itu, gambar dapat diubah ke ketinggian yang diperlukan.


Tidak membantu dalam situasi di mana ukuran gambar tidak diketahui atau dinamis.
Dan

6

Tulis properti rentang ini

span{
    display:inline-block;
    vertical-align:middle;
}

Gunakan display:inline-block;Ketika Anda menggunakan vertical-alignproperti. Itu adalah properti terkait


6

Anda dapat mengatur gambar sebagai inline elementmenggunakan displayproperti

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


3

Pada sebuah tombol di jQuery mobile, misalnya, Anda dapat mengubah sedikit dengan menerapkan gaya ini pada gambar:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

2

Solusi multiline:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Bekerja di semua browser dan ie9 +


2

Ini bisa membingungkan, saya setuju. Coba gunakan fitur tabel. Saya menggunakan trik CSS sederhana ini untuk memposisikan modals di tengah halaman web. Ini memiliki dukungan browser yang besar:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

dan bagian CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Perhatikan bahwa Anda harus menata dan menyesuaikan ukuran gambar dan wadah tabel agar berfungsi sesuai keinginan Anda. Nikmati.


0

Pertama CSS inline tidak dianjurkan sama sekali, itu benar-benar mengacaukan HTML Anda.

Untuk menyelaraskan gambar dan rentang, Anda cukup melakukannya vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>


2
Ada banyak alasan bagus untuk menggunakan CSS sebaris. Bereaksi: CSS di JS misalnya.
jlyonsmith

0

Tidak yakin mengapa itu tidak merendernya di browser navigasi Anda, tapi saya biasanya menggunakan snippet seperti ini ketika mencoba untuk menampilkan header dengan gambar dan teks terpusat, semoga membantu!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

0
<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

-4

Anda mungkin menginginkan ini:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Seperti yang disarankan orang lain, coba vertical-alignpada gambar:

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

CSS tidak mengganggu. Anda hanya tidak membaca dokumentasinya . ; P


6
Dan apakah tinggi gambarnya dinamis? Saya kacau :( PS, hanya karena ada dokumentasi untuk CSS tidak membuatnya menjengkelkan atau tidak intuitif.
sam

Apakah yang Anda maksud tidak menarik dan intuitif? Anda tidak menentukan apakah tinggi gambar sama sekali dinamis dalam pertanyaan Anda, jadi saya berasumsi ketinggian tetap adalah apa yang akan Anda pertahankan.
strager

2
Saya dengan sam dalam hal ini. Saya berasumsi bahwa item harus dipusatkan dengan apa pun ketinggian img ternyata. Saya pikir kita semua bisa berdiri sedikit dingin.
Michael Haren
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.