CSS水平居中线

Question

How can I achieve this view with CSS:

------------------TITLE

or

TITLE------------------

I have

<div id="titleBlock">
   <div id="title">Some text</div>
   <div id="titleLine"></div>
</div>

And my styles are:

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    clear: both;
    height: 20px;
}

#title {
    height: 10px;
    float: right;
}

My approach is here: jsFiddle

However the line width is defined with percents and I need it adjust automatically with CSS.

Answer 1

这可能是您想要的： http : //jsfiddle.net/XpSWX/1/

Answer 2

Hope this helps

<div id="titleBlock">
    <div id="title">Some text</div>
    <div id="titleLine"></div>
</div>​

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    float:left;
    height: 20px;
    margin-top:8px;
}

#title {
    height: 10px;
    float: right;
}​

http://jsfiddle.net/sY2SV/1

<div id="titleBlock">
    <div id="title">Some text</div>
    <div id="titleLine"></div>
</div>​

#titleLine {
    border-top: 1px solid black;
    width: 84%;
    float:right;
    height: 20px;
    margin-top:8px;
}

#title {
    height: 10px;
    float: left;
}​

http://jsfiddle.net/sY2SV/2

Answer 3

Here is a solution:

#titleBlock {
    width:100%;
}


#titleLine {
    background:black;
    position:absolute;
    z-index:1;
    left:0px;
    top:14px;
    width:100%;
    height: 1px;
}

#title {
    display:inline-block;
    padding:4px;
    background:white;
    position:relative;
    z-index:2;
    /* Only variable to change... Just say left and it woulb be title------- */
    float:right;
}​​​​

DEMO

Answer 4

Hey now you can used this

HTML

<div class="hello"><span>Hello i m sony</span></div>

Css

.hello{
background:green;
  text-align:left;
  position:relative;

}
.hello span{
  padding-right:10px;
background:green;
  display:inline-block;
  position:relative;
  z-index:1
}
.hello:after{
content:'';
  border-top:solid 5px red;
  position:absolute;
 right:0;
  left:0;
  top:7px
}

Live demo

http://tinkerbin.com/1guJzKcI

Answer 5

Check my answer in Horizontal Line in Background using Css3

You can do it with a 1% gradient like this

.datedAside {
     background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
     background: #FFF;
     padding: 0 0.5rem;
}

You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.

Answer 6

对于文本，最好使用text-align