html5怎么设置一段文字垂直居中 html中怎么让文字垂直居中 |
您所在的位置：网站首页 › 怎么设置文字环绕效果 › html5怎么设置一段文字垂直居中 html中怎么让文字垂直居中 |
html5怎么设置一段文字垂直居中 html中怎么让文字垂直居中
|
居中对齐的几种方式 水平居中对齐的几种方式 1.对于最简单的行内元素的居中采用text-align:center;设置即可//1.注意是父元素添加2.子元素会继承父元素的居中方式 父元素添加 text-align: center;子元素中的所有的行内标签都会水平居中，块级标签中的文字也会居中，即是说，父元素拥有text-align: center;子元素中的字体和行内元素都会居中，并且效果延续至子代。 text-align:center；//父元素拥有，子元素水平居中
你好 世界 你好 世界 // 你好 世界 你好 世界
.ta {
width: 400px;
height: 400px;
background-color: rgb(137, 177, 177);
text-align: center;
display: inline-block;
/* overflow: hidden; */
}
.ta p {
font-size: 120%;
}
.ta div {
margin-top: 50px;
width: 200px;
height: 200px;
background-color: antiquewhite;
}遇到了高度塌陷
2.marin:0 auto;对于已知宽度的元素使用，实现水平居中。 划线区域部分采用margin:0 auto;来实现水平居中显示，需提前写好元素的宽度。 .content { height: 100px; border: 2px solid #fff; } .content2 { background: #645d5a; text-align: center; } .center2 { height: 50px; width: 60%; border: 2px solid rgb(207, 136, 136); line-height: 50px; margin: 0 auto; }
3.table始现水平居中 1. 将外部块格式化为表格单元格就可垂直居中文本。2.元素外部嵌套table始现。 这是内容区三：用table实现。 .content3{ background: #2f5d34; } table{ margin: 0 auto; }
4.块级的元素转换为行内块元素来实现块级元素的水平居中显示。 块级元素转换成行内元素并且居中 .content4 { background: #9d43b4; text-align: center; } .center4 { display: inline; }
5.利用定位使元素居中，计算方式 父元素的宽度减去子元素的宽度 除以2 得到left或right的值，注意相对定位和绝对定位的应用。 我是中间的 .fu { position: relative; width: 500px; height: 500px; background-color: aqua; } .er { position: relative; text-align: center; line-height: 150px; width: 150px; height: 150px; left: 175px; top: 175px; background-color: aliceblue; }
垂直居中的几种方式 1.给父元素添加 line-height:（height）;//height为父元素的高度
你好 世界 div{ width: 200px; height: 200px; line-height: 200px; }2.文字水平垂直居中 给父类元素加 vertical-align: middle; 但是这个元素有时会失灵 那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。 你好 世界 .three { width: 400px; height: 200px; background: #ddd; display: table-cell; vertical-align: middle; }将外部块格式化为表格单元格 表格单元格的内容可以垂直居中，将外部块格式化为表格单元格就可垂直居中文本。
3.利用flex布局垂直居中
4.利用内边距 //使用不多 用起来比较麻烦 中间 .wai { width: 500px; height: 500px; background-color: aqua; padding-top: 300px; padding-left: 300px; } .nei { width: 100px; height: 100px; background-color: antiquewhite; }
5.利用CSS3的定位 position加上transform来实现文字垂直居中 仅作代码展示 //兼容性低 .center { position: relative; top:50%; transform:translateY(-50%); left:50%; transform:translateX(-50%); }6.相对绝对定位 和上文的水平居中类似不做过对赘述。 7.定位加上margin 元素 .child { position: fixed; width: 200px; height: 150px; background: blue; top: 50%; left: 50%; margin-top: -75px; margin-left: -100px; }
以上种种只是我总结出的居中方式，当然居中方式还有很多
|
【本文地址】
今日新闻 |
推荐新闻 |