html - 在边界线之间获取文本并将其 float

我有下面的HTML。

<div class="version_text">
                <div class="left">Rakesh Keerthi</div>
                <div class="center">Rakesh Keerthi</div>
                <div class="rght">Rakesh Keerthi</div>
            </div>

并使用以下CSS。

div.version_text{
    width:100%;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

div.version_text div.left{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.center{
    display:block;
    float:right;
    width:33%;
}
div.version_text div.rght{
    display:block;
    float:right;
    width:33%;
}

在这里，我能够并排浮动div，但必须在边界之间进行的内容是在边界之后。

预期的输出如下。

____________________________________________________
Rakesh Keerthi     Rakesh Keerthi     Rakesh Keerthi
____________________________________________________

但我得到了不同的输出。这是小提琴链接（Fiddle）。

请让我知道我要去哪里哪里以及如何解决。

谢谢。

最佳答案

您需要指定height和line-height。 line-height将使文本垂直居中。

此外，将display: inline-block与text-align: left，text-align: center和text-align: right一起使用以进行对齐。

Fiddle

div.version_text {
    width:100%;
    height: 30px;
    line-height: 30px;
    margin-top:10px;
    border-top:1px solid orange;
    border-bottom:1px solid orange;
}

div.version_text {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  border-top: 1px solid orange;
  border-bottom: 1px solid orange;
}
div.version_text div.left, div.version_text div.center, div.version_text div.rght {
  display: inline-block;
  text-align: left;
  width: 33%;
}
div.version_text div.center {
  text-align: center;
}
div.version_text div.rght {
  text-align: right;
}

<div class="version_text">
  <div class="left">Rakesh Keerthi</div>
  <div class="center">Rakesh Keerthi</div>
  <div class="rght">Rakesh Keerthi</div>
</div>

关于html - 在边界线之间获取文本并将其 float ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27226547/