美文网首页程序员
css文本居中的几种方式

css文本居中的几种方式

作者: WEB攻程狮 | 来源:发表于2017-10-04 20:55 被阅读0次

    行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素
    一、左右居中
    1.行内元素:
    常用的inline元素有:
    <a>、<span>、
    、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    (1)给父元素设置
    text-align:center

    2.块状元素:
    常用的块状元素有,
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    (1)定宽块状元素(width值或百分比已经固定的元素)
    ①通过设置“左右margin”值为“auto”来实现居中的。
    width:200px;margin:20px auto;
    (2)不定宽元素(width值且百分比没有固定)
    ①加入 table 标签
    ②设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
    ③设置 position:relative和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
    二、垂直居中
    1.父元素高度确定的单行文本:
    height:100px;line-height:100px;

    2.父元素高度确定的多行文本:
    (1)通过table属性设置(tr、td、etc)
    vertical-align:middle

    (2)或者
    display:table-cell;

    学习前端的同学注意了!!!
    学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群461593224,我们一起学前端!

    相关文章

      网友评论

        本文标题:css文本居中的几种方式

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