在div中间的CSS文本（div高度：20％）

<style> 
._1{ 
    height:20%; 
    width:100%; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis; 
} 
</style> 
<div class="_1">content</div>

如何使内容在div中间对齐？谢谢。 demo 在div中间的CSS文本（div高度：20％）

编辑：身高是％不是px。我设置了line-height: 20%但它不工作。

来源

2016-11-08 Đặng Duy Tâm

[CSS中心文本（水平和垂直）一个DIV块内（的可能的复制http://stackoverflow.com/questions/5703552/css-center-text-horizontal和垂直在一个div区块） –

@JishnuVS先生，身高是％不是px。 –

div{ 
    height: 20%; 
    width: 100%; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: space-around; 
    align-content: center;  
    }

来源

2016-11-08 10:58:01 xale94

但身高是％不px –

@ĐặngDuyTâm固定 – xale94

这是行不通的。先生 –

替代选项：使用垂直居中的内部元素。

要做到这一点：

设置._1到position: relative;
裹centerPosition类中的文本，并使用CSS下面这个类。

._1 { 
 
    position: relative; 
 
    height: 20%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    
 
    /* Just to make this example visible */ 
 
    border: 2px solid #555; 
 
} 
 

 
.centerPosition { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
/* Not needed, just making the page bigger */ 
 
.examplePage { 
 
    height: 300px; 
 
}

<div class="examplePage"> 
 
    <div class="_1"> 
 
    <div class="centerPosition">content</div> 
 
    </div> 
 
</div>

来源

2016-11-08 11:18:41 DBS

爵士代码工作得很好，非常感谢你！ –

如果你不想使用Flexbox的，你可以尝试使用CSS3转换。但为了这个工作，你需要用款或其他一些标记文本：

._1 p{ 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    position: relative; 
    top: 50%; 
} 
<div class="_1"><p>content</p></div>

随着该标记，您可以使用和表单元格对齐TECHNIC为好。

来源

2016-11-08 11:19:46

爵士代码工作得很好，非常感谢你！ –

Flex-box only solution。 Here browser support

._1{ 
 
    height:20%; 
 
    width:100%; 
 
    overflow:hidden; 
 
    white-space:nowrap; 
 
    text-overflow:ellipsis; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    
 
    border: 1px dashed deepskyblue; 
 
} 
 

 
html,body { 
 
\t height: 100%; 
 
}

<div class="_1">content</div>

来源

2016-11-08 11:24:21 CastenettoA

柔性盒很好。感谢先生帮助我！ –

你很好:) – CastenettoA

在div中间的CSS文本（div高度：20％）

回答

相关问题