CSS horizontal centered line - 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

This may be what you are after: 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

For text, it's best to use text-align