# 排版 ## 文字置中對孩子做置中非本身 ``` text-align: center; ``` ## img css 設定因為原來 img 預設格式為 inline，bottom 會多一點點空白，設為 block 貼齊容器，width 設為 100%，不然會爆開超出容器範圍，hight 設 auto 保持原圖片的比例。 ```css img { display: block; width: 100%; height: auto; } ``` ## 版面置中 ### 單欄確認 html 元素為 block，設定內容的寬度，將 margin 平分。 ```markup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, quibusdam.

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } ``` ### 多欄比照單欄做外圍 block 置中設定，將內容依欄數設定寬，用 float 把 margin 清掉，最後加 clearfix 讓下面的內容不會跑上來。 ```markup

Lorem ipsum dolor sit amet consectetur adipisicing elit.

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } .work { float: left; width: 33.3333%; } .clearfix { clear: both; } ``` ## 網頁導覽列先做版面置中，把 logo 往左移，nav 往右移，清掉 ul 預設格式。\ li 變為橫向有 2 種方法：1.display: inline 2.float: left (inline 有間隔空間無法點，float 加 padding 更好)\ 最後一樣要加 clearfix 區隔段落。 ```markup

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } #logo { float: left; } #nav { float: right; } #nav ul { margin: 0; padding-left: 0; list-style-type: none; } #nav li { float: left; } #nav a { padding: 0 10px; } .clearfix { clear: both; } ``` ## 特殊版面將圖片移出 block 有 2 種方法：\ 1.position: relative 2.margin-top: xxpx (margin 不會留白，position 只有圖片會單獨移動) ```markup

I am handsome

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat.

``` ```css body { background: #ccc; } .container { width: 300px; padding: 20px; margin-top: 50px; background: #fff; text-align: center; } .container img { margin-top: -70px; } /* .container img { position: relative; top: -70px; } */ ``` 滑鼠移到圖片上會有其他資訊\ 將資訊 position:absolute 移到圖片初始位置(要將圖片 position:relative 作為參考點)，加 padding 讓資訊往下移，但整個 block 會超出圖片範圍，因此要加 box-sizing 自動計算寬高，最後加上 hover 讓滑鼠移上去透明度變 1。 ```markup

Lorem ipsum dolor sit amet.

``` ```css .container { position: relative; width: 300px; background: #ccc; } img { display: block; width: 100%; height: auto; } .info { opacity: 0; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding-top: 40px; text-align: center; background: rgb(0, 0, 0, 0.5); } .info:hover { opacity: 1; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://mistborn.gitbook.io/til-coding/pai-ban.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.