塊級元素以及行內元素居中顯示

title>
type="text/css">
*        #container
#center
style>
head>
id="container">
id="center">
div>
div>
body>
html>

方法一也適用於img ,span等行內元素。

title>
type="text/css">
*        #container
#center
style>
head>
id="container">
id="center">
div>
div>
body>
html>

html>首先應當注意：

text-align: center;只作用於塊級元素。但它不會控制元素的對齊，而只是影響元素內部內容。

首先應當注意：

vertical-align: middle;只影響行內元素元素和替換元素，不影響塊級元素中的內容對齊（和text-align截然不同）。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。

html>執行以上**，會發現，container的高度並沒有佔到整個螢幕。修改如下

給html元素也加上 height:100%;或者給container加上position: absolute。

現在，水平居中了，但沒有垂直居中，**做如下修改後就可以實現垂直也居中了。

html>display:inline-block是為了能夠給span設定寬高，但是又不會產生換行。加上span並且也設定vertical-align:middle後，span和img 的中線就會對齊，從而實現效果img垂直居中。

vertical-align這個屬性會設定單元格框中的單元格內容的對齊方式。

**如下：

charset="utf-8">
title>
type="text/css">
*    body
#container
#center
style>
head>
id="container">
id="center">
div>
div>
body>
html>

通過新增display: table-cell;使得container變為**元素，從而可以直接使用vertical-align: middle實現垂直居中。

charset="utf-8">
title>
type="text/css">
*        #container
#center
style>
head>
id="container">
id="center">
div>
div>
body>
html>

（先寫到這裡吧，筆記整理）

行內元素 塊級元素以及行內塊元素的區別

a strong b em i span u s del ins 天生自帶屬性display inline,通常用來進行文字 加粗，斜體，鏈結 小圖示 小結構 的搭建 不獨佔一行，從左到右依次排列 排列到超出父元素的寬度會自動折行 設定寬高屬性以及margin和padding的上下不起作用，需要加d...

行內元素和塊元素以及行內塊元素的特點

初學html，接觸很多標籤 等，當寫出簡單的小頁面的時候，例如僅僅是一篇帶有標題的文章，標題標籤單獨一行，不管後面有多大的空間 標籤中使用多個給某些詞做強調，但是卻和中的其他內容同一行，由此，會思考為什麼和會有這種的不同？想要知道為何不同，得先了解html標籤的型別。html標籤一般分為塊標籤和行內...

常用的塊級元素 行內元素以及行內塊元素的解析

一.塊級元素 不廢話，直接上圖 div p h1 h6 ul ol dl li dd table hr blockquote address table menu pre，html5新增的header section aside footer等 從瀏覽器的顯示結果可以看出，塊級元素新開啟一行 即使是...