text-align -- 內容 · 前端知識 -- 學習整理

>[success] # text--align * 定義行內內容（例如文字,行內塊元素，圖片）如何相對它的塊父元素對齊 * **left**：左對齊 * **right**：右對齊 * **center**：正中間顯示 * **justify**：兩端對齊 [text-align mdn](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align) >[danger] ##### 案例 * 子元素是行元素，父元素設置了`text--align` 也無效 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .outer { text-align: center; } </style> </head> <body> <div class="outer"> <div style="width: 200px">1111111</div> </div> </body> </html> ~~~ * 文字,行內塊元素，圖片這類對`text--align`有效 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .outer { text-align: center; } </style> </head> <body> <div class="outer">  <div style="display: inline">1111111</div> <div>---------------------分割----------------</div>  <div style="display: inline-block">222222</div> <div>---------------------分割----------------</div>  <img src="./img/1" /> </div> </body> </html> ~~~