css 行元素和块元素相互转换居中

时间 2019-11-13

标签 css 元素相互转换居中栏目 CSS 繁體版

原文原文链接

1、块级元素行内元素

div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是由于它们的内容显示在行中，即“行内框”。php

您可使用 display 属性改变生成的框的类型。这意味着，经过将 display 属性设置为 block，可让行内元素（好比 <a> 元素）表现得像块级元素同样。还能够经过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其全部内容就再也不显示，不占用文档中的空间。css

可是在一种状况下，即便没有进行显式定义，也会建立块级元素。这种状况发生在把一些文本添加到一个块级元素（好比 div）的开头。即便没有把这些文本定义为段落，它也会被看成段落对待：布局

<div>                                    显示出来的效果为：
some text                                         some text
<p>Some more text.</p>                            Some more text.
</div>

在这种状况下，这个框称为无名块框，由于它不与专门定义的元素相关联。spa

块级元素的文本行也会发生相似的状况。假设有一个包含三行文本的段落。每行文本造成一个无名框。没法直接对无名块或行框应用样式，由于没有能够应用样式的地方（注意，行框和行内框是两个概念）。可是，这有助于理解在屏幕上看到的全部东西都造成某种框。ssr

块级元素特色：code

一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。（真霸道，一个块级元素独占一行）orm

二、元素的高度、宽度、行高以及顶和底边距均可设置。图片

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度ci

块状元素也能够经过代码display:inline将元素设置为内联元素文档

内联元素特色：

一、和其余元素都在一行上；

二、元素的高度、宽度及顶部和底部边距不可设置；

三、元素的宽度就是它包含的文字或图片的宽度，不可改变。

经常使用的块状元素有：

经常使用的内联元素有：

经常使用的内联块状元素有：

内联块状元素（inline-block）就是同时具有内联元素、块状元素的特色，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特色：

一、和其余元素都在一行上；

二、元素的高度、宽度、行高以及顶和底边距均可设置。

2、水平居中　　

　　行内元素和块级元素不一样,对于行内元素,只需在父元素中设置text-align=center便可;

　　对于块级元素有如下几种居中方式:　　

　　1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,可是这种方式不符合语义化标签的规范;　　

　　2.将块级元素转换行内元素(经过设置display:inline)后再居中.这种方式使居中元素变成行内元素而导致没法设置宽高;　　

　　3.设置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相对布局的方式居中.上面三种方式各有优劣,依使用情景具体选择.

3、垂直居中　　

　　1.对于知道高度的元素能够设置上下padding相等;　　

　　2.设置line-height和height相等　　

　　3.利用vertical-align,可是这属性只在tr,td中适用,故可将元素放置入table中在居中

源码

代码以下:

<div class="father">
<p class="blockCenter">
hehe</p>
</div>

<table class="tableclass">
<tr>
<td>
<ul class="ulclass">
<li><a href="#">呵</a></li>
</ul>
</td>
</tr>
</table>
<table class="tableclass">
<tr>
<td>
<ul class="ulclass">
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
</ul>
</td>
</tr>
</table>
<table class="tableclass">
<tr>
<td>
<ul class="ulclass">
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
<li><a href="#">呵</a></li>
</ul>
</td>
</tr>
</table>

<ul style="{text-align: center}">
<li style="{display: inline}">nihao </li>
</ul>

<ul class="relativeCenterFather">
<li class="relativeCenterChild">你好 </li>
</ul>



<hr />
<div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}>
我要來場說走就走的旅行
</div>

<table>
<tr verticla-align="center" height="100" background="#FF00FF">
<td>一弦一柱思華年</td>
</tr>
</table>

css样式

复制代码

代码以下:

css 行元素和块元素 相互转换 居中

1、块级元素 行内元素

css 行元素和块元素相互转换居中

1、块级元素行内元素