美文网首页
新技能get ---设置垂直居中

新技能get ---设置垂直居中

作者: 落木兮兮 | 来源:发表于2016-03-15 15:56 被阅读16次

<code>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div >
<p>ssss ssss sss sss ssss sss ssssssssssssssssss sss </p>
</div>
</body>
</html>

</code>

<code>
*{
margin:0;
padding:0;
}
div{
width:300px;
height:300px;
text-align:center;
border:1px solid;
position: relative;
}
div p
{
width: 29px;
vertical-align:middle;
display: inline-block;
}
div:before{
content: " ";
display: inline-block;
height: 100%;
width:0;
vertical-align: middle;
}
</code>

相关文章

  • 新技能get ---设置垂直居中

    JS Bin ssss ssss sss sss ssss sss ...

  • 垂直居中,水平居中

    CSS设置行内元素的水平居中 CSS设置行内元素的垂直居中 CSS设置块级元素的水平居中 CSS设置块级元素的垂直居中

  • CSS display: table-cell 用于水平垂直居中

    CSS display: table-cell 用于水平垂直居中 在 CSS 设置居中时候,水平和垂直居中的设置略...

  • CSS综合

    编码规范 设置上下padding垂直居中 使用绝对定位垂直居中 使用vertical-align垂直居中 使用ta...

  • LayaBox:富文本HtmlDivElement垂直水平居中

    注意:目前不支持文本的垂直居中对齐 示例:文本垂直水平居中(文本的垂直居中使用padding替代设置) 重点解析:...

  • CSS面试题(一)

    一、垂直居中,多行文本垂直居中? 1、单行文本垂直居中设置高度height和行高line-height,使高度he...

  • CSS布局与水平垂直居中

    左右布局 左中右布局 水平居中 垂直居中 水平垂直居中 左右布局 float实现左右布局 子元素设置float: ...

  • 水平居中和垂直居中

    水平居中设置--行内元素 水平居中设置--定宽块级元素 水平居中设置--不定宽块状元素 垂直居中--父元素高度确定...

  • 垂直居中设置

    @父元素高度确定的单行文本:父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line...

  • CSS布局--水平&垂直对齐

    设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文...

网友评论

      本文标题:新技能get ---设置垂直居中

      本文链接:https://www.haomeiwen.com/subject/tqhqlttx.html