Question

我正在尝试在数字不存在时在文本框的中心设置文本，当数字存在时，文本应该到顶部并在底部编号。

我可以正确显示数字框但没有数字框是垂直对齐不起作用。

我是一个HTML新蜜蜂。

有人可以帮助我吗？我看过各种文章，他们指出使用表格单元格和垂直对齐作为中间。我也尝试过，我认为红色框中间没有文字。

这是一个例子。

<!DOCTYPE html>
<html>
<head>
<style> 

.alignleft {
    float: left;    
}
.alignright {
    float: right;    
}
.even-boxes,
.odd-boxes {
    height : 52px;
    width : 430px;
    padding-left : 20px;
    display : table-cell;
    vertical-align : middle;
}

.odd-boxes {
    background-color:#FFCCCC;
}

.even-boxes {
    background-color:#CCEBFF;
}

.surname-entry {
    font-size: 25px;
    font-family:"Verdana";
}

.name-entry {
    font-size: 18px;
    font-family:"Verdana";
}

.another-entry {
    font-size: 14px;
    font-family:"Verdana";
}

.number-entry {
    font-size: 32px;
    font-family:"Verdana";
}

</style>
</head>
<body>

<div class="odd-boxes">

    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>    
    </div>
</div>
<div class="even-boxes">

    <div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <span class="number-entry alignright" style="margin-right:20px">K</span>
    <div class="another-entry">[1234567890101]</div>
    </div>
</div>
</body>
</html>

Answer 1

这是另一种垂直对齐文本的方法，此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

CSS仅调整<div>的大小，然后通过将<span>的行高设置为等于其高度，并使<div>垂直居中对齐<span>。 1}}一个带有vertical-align：center的内联块。然后它将{-1}}的行高设置回正常，以便其内容在块内自然流动。

<span>

演示链接 http://jsfiddle.net/CtH9k/

Answer 2

我之前误解了你，再试一次。如果您尝试垂直对齐元素

必须将span元素移出父div层次结构

<div>
    <span class="surname-entry">ABCDEFGH<span>,</span></span>
    <span class="name-entry">&nbsp;PQRSTU</span>
    <div class="another-entry">[1234567890101]</div>
</div>

<span class="number-entry">K</span>

你需要添加额外的css，关键的一个是display：inline-block来垂直对齐你的内部元素

.odd-boxes, .even-boxes{
  position:relative;
}

.odd-boxes>span, .even-boxes>span{
  position:absolute;
  right:20px;
  top:0;
  bottom:0;
  margin:auto;
  vertical-align:middle;
  height:39px;/*height need to be specified*/
}

另外我修改了你的一些css，你可以参考下面我的版本：

http://codepen.io/vincentccw/pen/vOJVbX

HTML - 文本在框的中心

2 个答案: