CSS文本居中小技巧

everfight 發布于2019-08-30 12:57 / 1839人閱讀

摘要：我們解析下這個彈窗內容短，居中，內容長，居左，不寫兩套樣式內容，怎么將兩個綜合在一起常做的話，估計看了前面的圖也知道答案的了，看如下樣式知道了嗎看出什么了嗎。來人，上代碼參考

我個人比較喜歡簡單粗暴的上實際的結果的，所以，請看如下需求（其實很簡單的，工作中一直有用到這種方法，就是沒想著去寫，然后看到其他人寫了一些，我也把我的應用場景也寫下，權當記錄吧！）

看到這個彈窗了嗎？通常我們的彈窗里的內容文本都是居中的，那么問題來了，怎么保持短的時候居中，長的時候則據左呢？

這是在工作中會遇到的，對你來說可能不是彈窗或者說是其它的東西。我們解析下這個彈窗：

內容短，居中，text-align: center

內容長，居左，text-align: left

不寫兩套樣式內容，怎么將兩個text-align綜合在一起？常做的話，估計看了前面的圖也知道答案的了，看如下樣式：

.container {
    text-align: center;
}

.content {
    display: inline-block;
    text-align: left;
}

知道了嗎？看出什么了嗎？ (。???)ノ

來人，上代碼 https://jsfiddle.net/lyplba/ye63j3e6/embed/result/

參考：aligning-text-smartly-in-css

云服務器 GPU云服務器 css技巧 css文本框西山居 html浮動居上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115190.html

[譯]148個資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

impig33 2019-08-29 11:10 評論0 收藏0
CSS垂直居中和水平居中

摘要：前言總括居中一直是一個比較敏感的話題，為了以后開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。前言總括： CSS居中一直是一個比較敏感的話題，為了以后開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇...

fredshare 2019-08-30 12:52 評論0 收藏0
CSS垂直居中和水平居中

摘要：前言總括居中一直是一個比較敏感的話題，為了以后開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。前言總括： CSS居中一直是一個比較敏感的話題，為了以后開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇...

haitiancoder 2019-08-01 15:07 評論0 收藏0
前端技術之_CSS詳解第四天

摘要：前端技術之詳解第四天一第三天的小總結盒模型，什么是盒子所有的標簽都是盒子。如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的盒子居中的值可以為，表示自動。前端技術之_CSS詳解第四天一、第三天的小總結盒模型box model，什么是盒子？　　所有的標簽都是盒子。無論是div、span、a都是盒子。圖片、表單元素一律看做文本。盒模型有哪些組成：　　width、hei...

番茄西紅柿 2019-04-23 13:45 評論0 收藏0