Pertanyaan css garis lurus tunggal atau beberapa garis vertikal


Saya memiliki judul yang dapat memiliki satu atau lebih baris.

Bagaimana saya bisa menyejajarkan teks secara vertikal? Jika selalu satu garis, saya hanya bisa mengatur tinggi-baris ke tinggi kontainer.

Saya bisa melakukannya menggunakan JavaScript, tetapi saya tidak menyukainya, saya mencari cara CSS murni.

Juga jika wadahnya bisa memuai dengan garis-garisnya akan sempurna, jadi saya selalu bisa memiliki padding yang sama di bagian atas dan bawah.

enter image description here


75
2018-02-08 11:25


asal


Jawaban:


Untuk ini, Anda bisa menggunakannya display:table-cell milik:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}
<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

Tetapi ia bekerja di IE8 & di atas. Baca artikel ini untuk info lebih lanjut: Trik CSS: Teks Multi-Linear Pusat Vertikal.


109
2018-02-08 11:38



Jika Anda tidak suka display:table trik (saya tahu saya tidak) inilah solusi tanpa itu:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

dengan HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

Ini memberi div ketinggian 5em, kecuali kontennya lebih tinggi, maka ia tumbuh.
Contoh langsung sini.

Edit: Oh, browser mana yang seharusnya berfungsi? IE8 tidak akan bekerja sama.

(Penyuntingan nanti: pembaruan CSS untuk menangani masalah di Chrome)


9
2018-02-08 12:36



Saya sangat suka solusi ini:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

Jangan ragu untuk menggunakan stylesheet, dan 100% untuk tinggi ...

Juga mungkin harus mengomentari spasi di antara tag span, karena ini adalah inline-blocks

Kredit pergi ke neraka. Saya mendapatkannya Sini

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

catatan: Ini tampaknya tidak berfungsi dengan beberapa konten baris.


9
2018-03-17 20:50



somthing seperti ini

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

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

3
2018-02-08 11:38



Jika Anda ingin teks Anda responsif, membungkus kata dari satu ke banyak baris sebagai lebar secara dinamis berubah, disebutkan di atas dengan trik inline-block helper (yang memiliki kompabilitas terbaik di sini) tidak cukup, karena .inlinehelper dapat mendorong teks pembungkus ke bawah dengan sendirinya.
 Berikut solusi lengkap untuk suatu tugas yang sederhana:

HTML: 

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

Melihat itu white-space:nowrap properti, yang mencegah .inlinehelper dan #content untuk membungkus satu sama lain. white-space:initial di #content me-reset kemampuan untuk membungkus span diri;

Pilihan lain: Lebih masalah preferensi pribadi. Anda dapat menggunakan elemen pseudo sebagai gantinya .inlinehelper. Hapus .inlinehelper aturan css dan elemen dan tambahkan selektor css pseudo-elemen ini:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

P.S .: Saya tahu bahwa ini benar-benar pertanyaan lama terlambat, oleh karena itu biarkan jawaban ini, mungkin itu akan membantu seseorang.


2
2018-05-30 13:57



Styling bijaksana, meja akan menjadi cara terbaik untuk menata konten Anda (taruh tag gaya dalam CSS):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

Jumlah baris akan membutuhkan skrip JS, lihat di sini:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html


1
2018-02-08 11:38



Saya suka solusi semacam itu. Saya melihat suatu tempat trik ini di stackoverflow tetapi tidak ingat di mana tepatnya. Sangat usefel! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}
<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>


0
2017-09-22 20:24