CSS文本居中小技巧

everfight 發(fā)布于2019-08-30 12:57 / 1836人閱讀

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

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

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

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

內(nèi)容短，居中，text-align: center

內(nèi)容長，居左，text-align: left

不寫兩套樣式內(nèi)容，怎么將兩個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云服務(wù)器云服務(wù)器 css技巧 css文本框西山居 html浮動居上

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115190.html

相關(guān)文章

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

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

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

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

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

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

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

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

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