Question

我尝试将span内的某些div元素与其左边框对齐。这是我目前的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我该如何解决？我现在尝试了一切..

Answer 1

在您的班级display: block;中添加.username即可完成工作，但这是另一种方法

<强> ==========

通过向容器position: relative;提供.bikoret以及高度以避免边框不覆盖.username和绝对位置.username，做到这一点：

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

这是 online example

========或者如果这是关于分隔符的全部========

你可以做这样的事情

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

这里是example

Answer 2

以block level element为中心：将margin-left:auto; margin-right:auto;设置为自身。

以inline level element为中心：将text-align:center;设置为其父级。

更新了工作演示： 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 3

以下是我如何做到这一点。

首先，我使用您当前的样式为父块.parent定义一个类，然后添加text-align: center。

对于子元素.bikoret，请应用display: inline-block，这意味着此元素在父级中居中。重要提示：设置text-align: left。

对于.bikoret的子元素，请分别处理每个元素。

对于.content，我会将宽度设置为auto和text-align: center以使文字居中。

对于.username，这只是一个内联元素，由于其父级text-align: left上的.bikoret，它可以根据需要位于左边缘。

.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>

注意： {@ 1}}代码已弃用，不应使用。

Answer 4

如果我理解正确你想要“向左对齐”一直向左移动？如果是这样，那么您可以简化HTML和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>

文本没有在div内对齐

4 个答案: