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樣式

複製代碼

代碼以下: