เทคนิค CSS สำหรับเส้นแนวนอนพร้อมคำที่อยู่ตรงกลาง

ฉันกำลังพยายามสร้างกฎแนวนอนพร้อมข้อความอยู่ตรงกลาง ตัวอย่างเช่น:

----------------------------------- ชื่อของฉันที่นี่ ------------ -----------------

มีวิธีทำใน CSS หรือไม่? ไม่มีเครื่องหมาย "-" ทั้งหมด

นี่คือประมาณว่าฉันจะทำมันเส้นจะถูกสร้างขึ้นโดยการตั้งค่าborder-bottomบนมีh2แล้วให้มีขนาดเล็กลง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; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

ฉันทดสอบใน Chrome เท่านั้น แต่ไม่มีเหตุผลที่ไม่ควรทำงานในเบราว์เซอร์อื่น

JSFiddle: http://jsfiddle.net/7jGHS/

หลังจากลองใช้วิธีแก้ไขปัญหาที่แตกต่างกันฉันได้รับหนึ่งที่ถูกต้องสำหรับความกว้างของข้อความที่แตกต่างกันพื้นหลังที่เป็นไปได้ใด ๆ และไม่เพิ่มมาร์กอัปพิเศษ

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%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

ฉันทดสอบใน IE8, IE9, Firefox และ Chrome คุณสามารถตรวจสอบได้ที่นี่http://jsfiddle.net/Puigcerber/vLwDf/1/

ตกลงอันนี้ซับซ้อนกว่า แต่ใช้ได้กับทุกอย่างยกเว้น IE <8

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

The: before and: after elements อยู่ในตำแหน่งที่แน่นอนเพื่อให้เราสามารถดึงหนึ่งไปทางซ้ายและหนึ่งไปทางขวา นอกจากนี้ความกว้าง (40% ในกรณีนี้) ขึ้นอยู่กับความกว้างของข้อความภายใน .. ต้องคิดเกี่ยวกับวิธีแก้ปัญหา อย่างน้อยที่สุดtop: 1.2emทำให้แน่ใจว่าบรรทัดอยู่ตรงกลางของข้อความมากหรือน้อยแม้ว่าคุณจะมีขนาดตัวอักษรที่แตกต่างกัน

ดูเหมือนว่าจะทำงานได้ดีแม้ว่า: http://jsfiddle.net/tUGrf/3/

วิธีที่สั้นและดีที่สุด:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

นี่คือโซลูชั่นแบบยืดหยุ่น

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

สำหรับเบราว์เซอร์ (ปัจจุบัน) ภายหลังdisplay:flexและpseudo-elements ทำให้การวาดเป็นเรื่องง่าย border-style, box-shadowและแม้กระทั่งbackgroundช่วยเกินไปสำหรับการแต่งหน้า

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

เว้นระยะห่างระหว่างช่องว่างระหว่างข้อความกับบรรทัด

ตัวอย่าง: http://jsfiddle.net/tUGrf/

ฉันดูรอบ ๆ เพื่อหาวิธีแก้ปัญหาสำหรับการตกแต่งที่เรียบง่ายนี้และฉันพบว่ามีบางอย่างแปลก ๆ บางอย่างแม้แต่กับ JS เพื่อคำนวณความสูงของแบบอักษรและ bla, bla, bla, bla จากนั้นฉันได้อ่าน หนึ่งในโพสต์นี้และอ่านความคิดเห็นจากสามสิบพูดเกี่ยวกับ fieldsetและlegendและฉันคิดว่ามันเป็น

ฉันกำลังเอาชนะสไตล์องค์ประกอบทั้งสองฉันคิดว่าคุณสามารถคัดลอกมาตรฐาน W3C สำหรับพวกเขาและรวมไว้ใน.middle-line-textชั้นเรียนของคุณ(หรือสิ่งที่คุณต้องการเรียกมัน) แต่นี่คือสิ่งที่ฉันทำ:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

นี่คือซอ: http://jsfiddle.net/legnaleama/3t7wjpa2/

ฉันเล่นกับสไตล์ขอบและมันยังทำงานใน Android;) (ทดสอบบน kitkat 4.XX)

แก้ไข:

ตามความคิดของ Bekerov Artur ซึ่งเป็นตัวเลือกที่ดีเช่นกันฉันได้เปลี่ยนภาพ. png base64 เพื่อสร้างจังหวะด้วย. SVG เพื่อให้คุณสามารถแสดงผลในความละเอียดใด ๆ และเปลี่ยนสีขององค์ประกอบโดยไม่ต้องใช้ซอฟต์แวร์อื่น ๆ ที่เกี่ยวข้อง :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

โซลูชันสำหรับ IE8 และใหม่กว่า ...

ปัญหาที่ควรทราบ:

การใช้ background-colorเพื่อปกปิดเส้นขอบอาจไม่ใช่วิธีที่ดีที่สุด หากคุณมีสีพื้นหลัง (หรือไม่ทราบ) ที่ซับซ้อน (หรือภาพ) การปิดบังจะล้มเหลวในที่สุด นอกจากนี้หากคุณปรับขนาดข้อความคุณจะสังเกตเห็นว่าสีพื้นหลังสีขาว (หรืออะไรก็ตามที่คุณตั้งไว้) จะเริ่มปกปิดข้อความในบรรทัดด้านบน (หรือด้านล่าง)

คุณไม่ต้องการที่จะ"คาดเดา"ความกว้างของส่วนต่าง ๆ เพราะมันทำให้รูปแบบมีความยืดหยุ่นและแทบจะเป็นไปไม่ได้ที่จะนำไปใช้กับเว็บไซต์ที่ตอบสนองซึ่งความกว้างของเนื้อหาเปลี่ยนแปลงไป

สารละลาย:

( ดูJSFiddle )

แทนที่จะใช้ "กำบัง" ที่เป็นเส้นขอบด้วย a background-colorให้ใช้displayคุณสมบัติของคุณ

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

ปรับขนาดข้อความของคุณโดยการวางfont-sizeคุณสมบัติของคุณใน.groupองค์ประกอบ

ข้อ จำกัด :

• ไม่มีข้อความหลายบรรทัด บรรทัดเดียวเท่านั้น
• HTML มาร์กอัปไม่หรูหรา
• topทรัพย์สินในองค์ประกอบที่จะต้องครึ่งหนึ่งของ.line line-heightดังนั้นถ้าคุณมีline-heightของ1.5emแล้วควรจะเป็นtop -.75emนี่เป็นข้อ จำกัด เนื่องจากมันไม่ได้เป็นแบบอัตโนมัติและหากคุณใช้สไตล์เหล่านี้กับองค์ประกอบที่มีความสูงของเส้นต่างกันคุณอาจต้องนำline-heightสไตล์ของคุณไปใช้ใหม่

สำหรับฉันข้อ จำกัด เหล่านี้มีมากกว่า "ปัญหา" ที่ฉันสังเกตเห็นในตอนต้นของคำตอบสำหรับการใช้งานส่วนใหญ่

สิ่งนี้ให้ความยาวคงที่สำหรับบรรทัด แต่ใช้งานได้ดี ความยาวบรรทัดถูกควบคุมโดยการเพิ่มหรือการ '\ 00a0' (พื้นที่ Unicode)

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

หากใครสงสัยว่าจะตั้งหัวข้ออย่างไรให้ปรากฏขึ้นโดยมีระยะห่างคงที่ทางด้านซ้าย (และไม่อยู่กึ่งกลางตามที่แสดงไว้ด้านบน) ฉันคิดว่าโดยการแก้ไขโค้ดของ @ Puigcerber

h1 {
  white-space: nowrap;
  overflow: hidden;
}

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

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

นี่JSFiddle

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

สิ่งนี้จะช่วยคุณ

ฉันใช้เค้าโครงตารางเพื่อเติมด้านข้างแบบไดนามิกและหารความสูง 0 ตำแหน่งแบบสัมบูรณ์สำหรับการวางตำแหน่งแนวตั้งแบบไดนามิก:

• ไม่มีส่วนข้อมูลที่กำหนดค่าตายตัว
• ไม่มีภาพ
• ไม่มีองค์ประกอบแบบหลอก
• พื้นหลัง
• ลักษณะแถบควบคุม

https://jsfiddle.net/eq5gz5xL/18/

ฉันพบว่าจุดศูนย์กลางที่แท้จริงด้านล่างเล็กน้อยดูดีที่สุดพร้อมข้อความ สิ่งนี้สามารถปรับได้เมื่อ55%มี (ความสูงที่สูงขึ้นทำให้แถบต่ำกว่า) การปรากฏตัวของสายสามารถเปลี่ยนแปลงที่border-bottomเป็น

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

ไม่ใช่เพื่อเอาชนะม้าที่ตายแล้ว แต่ฉันกำลังค้นหาวิธีแก้ปัญหาจบลงที่นี่และฉันก็ไม่พอใจกับตัวเลือกไม่น้อยด้วยเหตุผลบางอย่างที่ฉันไม่สามารถหาวิธีแก้ปัญหาที่ให้มาที่นี่เพื่อทำงานได้ดีสำหรับฉัน (น่าจะเป็นเพราะข้อผิดพลาดในส่วนของฉัน ... ) แต่ฉันได้เล่นกับ flexbox และนี่คือสิ่งที่ฉันได้ทำงานเพื่อตัวเอง

การตั้งค่าบางอย่างใช้สายแบบแข็ง แต่มีจุดประสงค์เพื่อสาธิตเท่านั้น ฉันคิดว่าวิธีนี้ควรทำงานในเบราว์เซอร์ที่ทันสมัยใด ๆ เพียงแค่ลบ / ปรับการตั้งค่าคงที่สำหรับคลาส. flex-parent ปรับสี / ข้อความ / เนื้อหาและ (ฉันหวังว่า) คุณจะมีความสุขเหมือนฉันด้วยวิธีการนี้

HTML:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

ฉันบันทึกโซลูชันไว้ที่นี่ด้วย: https://jsfiddle.net/Wellspring/wupj1y1a/1/

ในกรณีที่ทุกคนต้องการ IMHO ทางออกที่ดีที่สุดในการใช้ CSS คือโดย flexbox

นี่คือตัวอย่าง:

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}

    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

สิ่งนี้จะส่งผลให้มีเนื้อหาที่จัดอยู่กึ่งกลางอย่างสมบูรณ์แบบเสมอกับบรรทัดไปทางซ้ายและขวาพร้อมการควบคุมระยะห่างระหว่างบรรทัดกับเนื้อหาของคุณได้ง่าย

มันสร้างองค์ประกอบเส้นก่อนและหลังการควบคุมด้านบนของคุณและตั้งค่าให้สั่ง 1,3 ในภาชนะ flex ของคุณในขณะที่การตั้งค่าเนื้อหาของคุณเป็นคำสั่งที่ 2 (ไปตรงกลาง) การให้ก่อน / หลังการเติบโตของ 1 จะทำให้พวกเขาใช้พื้นที่ว่างมากที่สุดเท่า ๆ กันในขณะที่รักษาเนื้อหาของคุณเป็นศูนย์กลาง

หวังว่านี่จะช่วยได้!

ฉันไม่แน่ใจ แต่คุณสามารถลองใช้กฎแนวนอนและผลักข้อความเหนือขอบด้านบน คุณจะต้องมีความกว้างคงที่ในแท็กวรรคและพื้นหลังของคุณด้วย มันแฮ็คเล็กน้อยและฉันไม่รู้ว่ามันจะใช้ได้กับทุกเบราว์เซอร์หรือไม่และคุณต้องกำหนดระยะขอบติดลบตามขนาดของแบบอักษร ใช้งานได้กับโครเมี่ยม

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

ฉันได้ลองวิธีที่แนะนำเกือบทั้งหมด แต่จบลงด้วยปัญหาบางอย่างเช่นความกว้างเต็มหรือไม่เหมาะกับเนื้อหาแบบไดนามิก ในที่สุดฉันก็แก้ไขโค้ดและทำงานได้อย่างสมบูรณ์ โค้ดตัวอย่างนี้จะวาดบรรทัดเหล่านั้นก่อนและหลังและมีความยืดหยุ่นในการเปลี่ยนแปลงเนื้อหา จัดกึ่งกลางเช่นกัน

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

ผลลัพธ์: https://jsfiddle.net/fasilkk/vowqfnb9/

สำหรับฉันวิธีนี้ทำงานได้อย่างสมบูรณ์ดี ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

ผู้ที่ใช้ Bootstrap 4 สามารถทำได้ด้วยวิธีนี้ คลาสที่กล่าวถึงในโค้ด HTML นั้นมาจาก Bootstrap 4

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

และเขียน HTML ของคุณเช่นนี้

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

เส้นแนวนอนและแนวตั้งที่มีคำอยู่ตรงกลาง

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

คำตอบนี้ยังมีในhttps://stackoverflow.com/a/57279326/6569224

• สร้างภาพขนาดเล็ก 1x18 พร้อมจุดสีเดียว # e0e0e0
• เปลี่ยนภาพเป็นรหัส base64

ผลลัพธ์:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>