html - 如何在具有百分比高度的 div 中间垂直对齐文本?

标签 html css dreamweaver

<分区>

这是我现在拥有的。在使用 vertical-align:middle 并将 line-height 设置为与 height 属性相同的值的其他 div 中它应该可以工作!唯一问题是在那些 div 中我使用了像素尺寸而不是百分比。谁能告诉我为什么这不适用于百分比?还将 text-size 设置为 50% 也应该使文本大小为 div 的一半,但它真的很小吗?这是怎么回事?

#chooseStateAlabama {
    width: 20%;
    height: 25%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
    background-size: 100% 200%;
    float: left;
    color: #FFFFFF;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 50%;
    line-height: 25%;
    text-align: center;
    vertical-align: middle;
}

最佳答案

您可以对单个元素或伪元素使用 display:inline-blockheight:100%vertical-align:middle除了文本(之前或之后):DEMO

#chooseStateAlabama:before {/* this can be an extra tag within HTML structure if pseudo used for other purpose */
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

如果您碰巧有更多内容或超过 1 行,那么也使用一个元素将其包裹起来,并对其应用显示和垂直对齐。 DEMO2 to see behavior

关于html - 如何在具有百分比高度的 div 中间垂直对齐文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25853679/

相关文章:

css - 在 Dreamweaver 中定位视频

java - 使用 JPanels/JFrames 显示?

html - CSS/HTML 似乎无法使菜单标题居中

javascript - 用 jQuery 隐藏的 HTML 元素在链接单击时不会重新出现

HTML 表单方法发布在本地主机上无法正常工作

html - Div child 未在 chrome 或 ie 上将高度设置为 100%

html - Windows 8 输入[类型 ="range"] 样式

javascript - 在 android 中使用 chrome 的移动设备中,当我向下滚动模式并且地址栏消失时,底部出现空白

javascript - 为什么自关闭脚本元素不起作用?

html - 超出部分的另一个内部的 div