Petua CSS: Buat Garisan Mendatar dan Teks Berpusat

Question

Saya cuba membuat pembahagi mendatar dengan beberapa teks. Contohnya: ----------------------------------Ini tajuk saya--------- - -------------------------Adakah terdapat cara untuk mencapai kesan ini dalam CSS? Jelas sekali tidak perlu menggunakan semua tanda sempang "-".

P粉555682718 · Answer

Selepas mencuba penyelesaian yang berbeza, saya menemui penyelesaian yang berfungsi untuk lebar teks yang berbeza, sebarang latar belakang yang mungkin dan tanpa menambah penanda tambahan.

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

标题
这是一个较长的标题

Saya menguji dalam IE8, IE9, Firefox dan Chrome. Anda boleh menyemaknya di sini: http://jsfiddle.net/Puigcerber/vLwDf/1/

P粉578680675 · Answer

Beginilah kira-kira cara saya melakukannya: dengan mempunyai latar belakang yang tidak telus dalam disertakan h2 上设置 border-bottom，然后给 h2 设置较小的 line-height 来创建线条。然后将文本放在一个嵌套的 span .

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

这是一个测试

这是一些其他内容