div文本垂直居中(div text vertical aligan)

.container {

    background:darkcyan;
    width: 135px;
    height: 84px;
    display: table;
}

.container p {
    display: table-cell;
    vertical-align: middle;
    word-break: break-all;
    text-align: center;
}

 <div class="container">
       <p>ally and horifffffffffffffffffffffffffffally.</p>
 </div>

效果如下

-->

ally and horifffffffffffffffffffffffffffally.

时间： 2024-10-05 23:09:17

div文本垂直居中(div text vertical aligan)的相关文章

文本、DIV水平居中和垂直居中

文本居中 text-align:center; //代表文本居中文本垂直居中 text-align:center; height:100px; //文本包含块的高度 line-height:100px; //行内高度垂直需要文本包含块的高度和行内高度一致 DIV居中 margin:0 auto; DIV垂直居中 div垂直居中分两种情况,一种是已知该div的宽高:另一种是div的宽高是未知的. 1.宽高已知 { width:100px; height:100px; position:abso

DIV内容垂直居中

css垂直居中属性设置vertical-align: middle对div不起作用,例如: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Commpatible" content="IE=edge"> 6 <ti

javascript 垂直居中div

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>归属地查询</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body { background-color: #F1F1F1; } .txt{ text-align: center; fo

DIV实现垂直居中的几种方法

说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 1 div { 2 width:200px; 3 height:300px; 4 border: 1px solid #000; 5 vertical-align: middle; 6 } 原来vertical-align属性仅能够作用于单元格或图像显示.因此要在上面样式内加入以下代码,才能够使文字或图像垂直居中: 1 display: table-cell;

调整窗口大小也能够实现div水平垂直居中代码实例

调整窗口大小也能够实现div水平垂直居中代码实例:将一个div在窗口内实现居中效果,基本上没有什么难度,具体可以参阅CSS实现div屏幕居中效果代码一章节. 但是有时候我们可能会有这样的需求,就是在调整窗口大小的情况下也能够实现div垂直水平居中效果,下面通过代码实例做一下简单介绍,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

随机图片大小在DIV中垂直居中对齐总结

老遇到这种样式现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0;line-height: 1;font-size: '宋体';padding

css 实现DIV水平垂直居中于屏幕

原文地址: http://www.manongjc.com/article/374.html css如何将div实现全屏水平垂直居中,本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果,代码是最有说服力的,直接看代码. 代码如下: <!DOCTYPE html> <html> <head> <title>css 实现DIV水平垂直居中于屏幕</title> <style type="text/css"&g

【html】【10】div布局[div水平垂直居中]

必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置成不同的值. 例子: 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

未知宽高div水平垂直居中3种方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body>  <div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1 <div