美文网首页
关于居中

关于居中

作者: molly的红草帽 | 来源:发表于2018-08-11 09:27 被阅读0次

一、文字居中

text-align:center;
line-height:父元素的height值;

二、图片居中(块元素居中)

1.1 绝对定位居中一(万能居中法)

父元素 position:relative;
子元素
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;

1.2绝对定位居中(元素本身宽高已知)

父元素 position:relative;
子元素
position:absolute;
left:50%;
top:50%;
margin-left:负的宽度一半;
margin-top:负的高度的一半;

1.3使用margin

margin:auto
注意:使用margin时,元素宽度需要设置,不能float,必须是块元素

三、文字和图片同时在父元素中垂直方向居中

图片:
float:left;
margin:上 右 0 左;
文字直接在父元素上面设置:
line-height:父元素的height值;

相关文章

  • 关于居中

    一、文字居中 text-align:center;line-height:父元素的height值; 二、图片居中(...

  • 关于居中

    文本居中 完全响应式居中(需要定义高度)

  • 关于居中

    1.水平居中的 margin:0 auto; a.图片设为块级,margin:0 auto; b.不浮动 ...

  • 中国移动一键登录

    关于103102包签名错误 关于手机号居中

  • 2018-05-22 CSS如何居中

    本文翻译自CSS Tricks 中关于居中的相关介绍。 1、水平居中 内联元素的水平居中(如链接或文本) 可以在一...

  • margin auto

    1. margin auto 与垂直居中 关于垂直居中的方式方式1:利用父元素position:relative和...

  • 关于居中问题

    text-align:center 写在父级作用于子级,使行元素子级及文本内容水平居中 margin: 0 aut...

  • 关于垂直居中

    垂直居中,是前端的基本操作,我主要在两种情况下进行简单的实现。分别为: 已知高度(指自身高度) 未知高度简单的ht...

  • 关于居中布局

    发现之前写过的又忘了。 之前在百度前端学院的时候写过居中。【任务】 【自己写的例子】 【代码】 水平居中 非块...

  • 关于垂直居中

    前端7班 陆恩泽在网页布局中,我们经常需要对div区块,文本和图片进行垂直居中,以便达到美观的效果。上一次直播课中...

网友评论

      本文标题:关于居中

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