1. 程式人生 > >css設定單行居中,多行居左/居右

css設定單行居中,多行居左/居右

在標題的設定上,不知道大家有沒有碰到過這樣的一個情況:在文字字數在一行的情況下,讓其居中顯示,而在文字字數達到多行的情況下,讓其居左顯示

其實當時在自己腦中顯示就是利用js來控制(原諒我是個菜鳥)

經過公司同事的點撥,第一次使用了css來這樣的佈局

廢話多了,直接上個程式碼吧。。

html中

<div>
    <p>標題內容</p>
</div>

css中

div {
    padding : 0 2vw;
    margin : 0 auto; // 使div框居中
    width : 80vw; 
    text-align
: center; // 文字居中顯示 } p { width : auto; // 必設 display : inline-block; // 不能設定為block text-align : left; // 居左顯示 }

這樣就可以達到效果啦。。。

不需要每次都想著用js來解決問題了

相關推薦

css設定單行居中/

在標題的設定上,不知道大家有沒有碰到過這樣的一個情況:在文字字數在一行的情況下,讓其居中顯示,而在文字字數達到多行的情況下,讓其居左顯示 其實當時在自己腦中顯示就是利用js來控制(原諒我是個菜鳥)

CSS特效(7)——單行居中超過兩用省略號

block lang overflow normal ips http init lin amp 單行居中,多行居左,超過兩行用省略號 <!DOCTYPE html> <html lang="en"> <head> <meta

不可思議的顏色混合模式 mix-blend-mode (轉) 談談一些有趣的CSS題目(四)-- 從倒影說起談談 CSS 繼承 inherit 談談一些有趣的CSS題目(五)-- 單行居中,行居左,超過兩省略 談談一些有趣的CSS題目(九)-- 巧妙的實現 CSS 斜線

開本系列,談談一些有趣的 CSS 題目,題目型別天馬行空,想到什麼說什麼,不僅為了拓寬一下解決問題的思路,更涉及一些容易忽視的 CSS 細節。 解題不考慮相容性,題目天馬行空,想到什麼說什麼,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補習一下吧。 不斷更新,不斷更新,不斷更新,重

css佈局實現單行文字水平居中文字靠

單行文字居中,多行文字靠左,需要css佈局來實現,那麼就需要用到兩層元素,外面一層設定text-align:center;裡面一層為行元素,需要設定text-align:left;這樣有一行的時候因為裡面是行內元素,有多少內容就多寬,而外面一層設定了text-align:ce

Css實現單行文字、文字、截斷

一、單行文字截斷 text-overflow 文字溢位經常用到的應該就是 text-overflow:ellipsis 了,只需輕鬆幾行程式碼就可以實現單行文字截斷。 div { white-space: nowrap; overflow: hidden; text-over

css實現單行文字和文字省略號

單行文字出現省略號的條件: <style> p { width: 200px; /*寬度*/ text-overflow: ellipsis; /*文字以省略號的方式隱藏*/ white-space: nowrap;/*禁止文字內容折行*/

移動端設定單行文字和文字出現省略號

單行文字: while-space:nowrap; 強制一行 overflow:hidden; 多餘部分隱藏 text-overflow:ellipisis;隱藏部分變成省略號 … 多行文字: overflow:hidden; 多餘部分隱藏 text-overflow:ellip

MYSQL(簡單查詢單行查詢查詢)

一、簡單查詢 1.資料查詢       SELECT colName1,colName2,colName3,.. FROM tName [約束]     SELECT 選擇查詢列表    FROM 提供資料來源(表、檢視或者其他資料來源)     //查詢所有的列,

Python入門(一):單行字串字串和Unicode字串

1 單行字串 字串可以用''或者""括起來表示。如果字串本身包含 ',可以用" "括起來表示,比如 "I'm OK"  類似的,如果字串包含",我們就可以用' '括起來表示: 'Learn "Python".'  如果字串既包含'又包含"怎麼辦?這個時候,就需要對字串

如何同時加註釋與取消及如何同時

eclipse 中如何多行同時加註釋行級註釋:Ctrl + /或Ctrl + Shift + C 加的是“//”註釋,同時也可以Ctrl + /或Ctrl + Shift + C取消“//”註釋

單行居中顯示文字顯示超過用省略號結尾

轉——https://www.cnblogs.com/vanstrict/p/5923633.html   首先是單行居中,多行居左 居中需要用到 text-align:center,居左是預設值也就是text-align:left。如合讓兩者結合起來達到單行居中,多

css設置字體單行超出省略號顯示

display overflow tty AC ext lam pla vertica line   單行:   overflow: hidden;   text-overflow:ellipsis;   white-space: nowrap; 多行     di

CSS實戰技巧:大小不固定文字的垂直居中

1.單行文字 html程式碼 <div> <p>單行文字</p> </div> css程式碼 div { wi

CSS單行省略和省略方法

css abs gradient text lam -c width nbsp spl 單行顯示省略css樣式:  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis; 多行省略:   方法一、 

單行文字與文字在div排列中垂直居中

在一行四列、固定高度的div中,有的div裡p為單行,有的p為多行,要使他們都能保持在div中居中。 為父元素設定高度、行高 為p元素設定display、行高、位置 div{ width:100px; height:200px; line-hei

Notepad++刪除程式碼中的註釋可刪除//單行註釋和/**/註釋

申請軟體著作權時需要清除程式碼中的註釋,可以通過word和Notepad++組合操作來快速的完成 1。使用word的插入檔案功能合併多個原始碼檔案,操作方法為:新開啟1個word檔案,在“插入”標籤欄下找到“物件”點選右邊的小三角下拉選單裡選擇“檔案中的文字...”,然後在

通過li-canvas輕鬆實現單圖、圖、圓角圖繪製單行文字、文字等

Html5新增的canvas是個強大的功能, 估計大家平時都會用到,只是頻率不高,偶爾用它合成圖片,但是如果不進行封裝的話,程式碼會很亂,所以對canvas常用的畫圖、繪製文字、儲存功能進行了封裝,目前還比較滿意,能夠快速完成canvas繪圖任務,從容應對需求變更,只需進行簡單配置即可。 li-

統計程式碼檔案中的實際有效去掉空單行註釋、註釋

#coding=gbk import os #rootdir='f:\\pylianxi' def count_line_core(file_name): ##傳入單個檔案,統計行數,之後返回該檔案的實際程式碼行數;區分utf-8、gbk有待優化 print('core_file_name

前端之單行文字水平垂直居中文字水平居中

一丶單行文字 (1)水平居中 text-align:center:控制單行文字水平居中 (2)垂直居中 設定行高,當line-height:50px 行高等於父級高,文字即是垂直居中(這裡的父級高是div) 二丶多行文字水平居中 設定一個標籤 比如把多行文字放在p標籤中。然後通過marg

Python 註釋規範(單行特殊註釋)

單行註釋 #單行註釋 多行註釋 ''' 第一行註釋 第二行註釋 第三行註釋 ''' 或者 """ 第一行註釋 第二行註釋