Text does not align left inside a div - html

Question

I'm trying to align some span element inside a div to it's left border.
This is currently my code:
.bikoret
{
width:40%;
border:1px solid black;
}
.bikoret > .content
{
width:80%;
padding:0;
word-wrap: break-word;
}
.bikoret > .username
{
text-align:center;
padding-left:1%;
padding-right:1%;
position:relative;
left:0;
border-top:1px inset;
}
<div dir="rtl" style="text-align:center; background-color:White; border-top:1px; border-style:inset; margin-top:4px; padding-left:10px; padding-right:10px;" runat="server" id="takzir">
<center>
<div class='bikoret'>
<div class='content'>
this is centered
</div>
<span class='username'>this is aligned to left</span>
</div>
</center>
</div>
How can I fix it? I tried everything by now..

Answer 1

Here is how I would approach this.
First, I define a class for the parent block, .parent, with your current styling and add text-align: center.
For the child element .bikoret, apply display: inline-block which means that
this element is centered within the parent. Important: set text-align: left.
For the child elements of .bikoret, treat each element separately.
For .content, I would set the width to auto and text-align: center to center your text.
For .username, this is simply an inline element, and because of text-align: left on its parent (.bikoret) it sits to the left edge as you want.
.parent {
text-align: center;
background-color: White;
border-top: 1px;
border-style: inset;
margin-top: 4px;
padding-left: 10px;
padding-right: 10px;
}
.bikoret {
width: 40%;
border: 1px solid black;
display: inline-block;
text-align: left;
}
.bikoret > .content {
text-align: center;
width: auto; /* Why 80%? */
padding: 0;
word-wrap: break-word;
background-color: yellow;
}
.bikoret > .username {
padding-left: 1em; /* % padding won't really work here... */
padding-right: 1em;
border-top: 1px inset;
background-color: beige;
}
<div class="parent">
<div class='bikoret'>
<div class='content'>this is centered</div>
<span class='username'>this is aligned to left</span>
</div>
</div>
Note: The center tag is deprecated and should not be used.

Answer 2

adding a display: block; to your class .username will do the job, but here's another ways of doing it
==========
By giving a position: relative; to your container .bikoret along with a height to avoid the border not being covering the .username and a position absolute to .username as well, will do it:
.bikoret {
width: 40%;
border: 1px solid black;
position: relative;
height: 40px;
}
.bikoret > .username {
padding-left: 1%;
padding-right: 1%;
position: absolute;
left: 0;
border-top: 1px inset;
}
Here's an online example
======== Or if this is all about the divider ========
You can do something like this
<div class='bikoret'>
<div class='content'>this is centered</div>
<div class='divider'></div>
<span class='username'>this is aligned to left</span>
</div>
CSS
.bikoret {
width: 40%;
border: 1px solid black;
}
.divider {
height: 1px;
background: #909090;
width: 60%;
}
.bikoret > .username {
padding-left:1%;
padding-right:1%;
text-align:left;
display:block;
}
Here's the example

Answer 3

To center a block level element: set margin-left:auto; margin-right:auto; to itself.
To center an inline level element: set text-align:center; to its parent.
Updated working demo: http://jsfiddle.net/k2xh3xya/1/
HTML
<div dir="rtl" style="" runat="server" id="takzir">
<center>
<div class='bikoret'>
<div class='content'>this is centered</div>
<span class='username'>this is aligned to left</span>
</div>
</center>
</div>
CSS
#takzir {
background-color:White;
border-top:1px;
border-style:inset;
margin-top:4px;
padding-left:10px;
padding-right:10px;
}
.bikoret {
width:40%;
border:1px solid black;
text-align: left;
}
.bikoret > .content {
width:80%;
padding:0;
word-wrap: break-word;
text-align:center;
margin: auto;
}
.bikoret > .username {
padding-left:1%;
padding-right:1%;
border-top:1px inset;
}

Answer 4

If I understand you correctly you want the "this is aligned to left" to be moved all the way to the left? If so then you could simplify your HTML and CSS.
.textOuter {
width:100%;
float:left;
text-align:center;
background-color:white;
border-top:1px;
border-style:inset;
margin-top:4px;
padding-left:10px;
padding-right:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.textInner {
width:40%;
float:left;
position:relative;
left:30%;
border:1px solid black;
}
.textCenter {
width:100%;
float:left;
}
hr {
width:80%;
float:left;
position:relative;
left:10%;
margin:0;
padding:0;
}
.textFull {
float:left;
}
<div class="textOuter">
<div class="textInner">
<div class="textCenter">this is centered</div>
<hr>
<div class="textFull">this is aligned to left</div>
</div>
</div>