h5學習筆記：居中
將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下less，增加了一些巢狀和變數程式設計。似乎也不錯。
先將一些記錄下來。
1.text-align 實現居中效果
這種適合inline的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title 
2.margin :0 auto 實現居中效果
使用margin:0 auto；的方式可以實現一些固定的尺寸div的時候 實現居中。當內部子div設定了尺寸寬度後，可以使用對應的處理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.center{
border 
3.使用position方式處理
使用絕對定位的方式來實現居中效應。transform 在不確定具體尺寸的時候使用。使用transform相對偏移50% 可以解決到在left 和top的時候情況。 使用在IE低版本相容性 存在問題。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.center{
border: 1px solid red;
padding: 20px 20px;
position: relative;
}
.sub_center{
width: 300px;
height: 150px;
border: 1px solid red;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 150px;
}
</style>
<body>
<div class="center">
<div class="sub_center">我的文字居中了</div>
</div>
</body>
</html>
4.使用flex的方式
flex 和配合justify-content: center;方式可以實現內部元素實現居中效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.center{
border: 1px solid red;
padding: 20px 20px;
display: flex;
justify-content: center;
}
.sub_center{
width: 300px;
height: 150px;
border: 1px solid red;
text-align: center;
line-height: 150px;
}
</style>
<body>
<div class="center">
<div class="sub_center">我的文字居中了</div>
</div>
</body>
</html>
相關推薦
h5學習筆記：居中
將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下le
h5 學習筆記：記錄一些前端用到後臺和移動樣式庫
這幾天一直在找一些移動和業務樣式庫，發現了不少不錯的，既是漂亮又符合業務用到。 前端發展真的變化很快，發現市面上還是有不少開源好用的產品。針對後臺研發的，有阿里ant design、阿里通訊的，還有餓了麼，京東，有贊等等一些庫。我比較喜歡ant design裡面
h5學習筆記： css佈局案例練習
今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。
h5學習筆記：layui table
最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。 一 、Table 元件 Tabl
h5學習筆記：flex
flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。 flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。 今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。
h5學習筆記：使用fis的前端構建工具記錄
這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。 無意中找到了fis百度的前端構建工
h5學習筆記：vue 路由部署伺服器子目錄問題
《Egret 引擎入門》 這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。 出現的現象 前端vuejs+vue-router+webpack的組合，打包是由w
h5學習筆記：UI庫
自從接觸了web開發以來，每天都會很糾結選什麼UI框架才是比較合適？擺在這個問題面前是一個技術的選型。要想知道，web開發的坑實在太深。不斷地大廠推出開源框架，不斷地發現很多造輪子。或者看到一個比較漂亮就會選。 最近我深刻體會到這種矛盾的存在，前段時間一直用j
h5學習筆記：http-server小工具
今天下午遇到一個小問題，下載的專案放置XAMPP二級目錄裡面，資源都會發生錯誤的情況，這個時候為了解決這個辦法，使用了fis3的內建伺服器去處理。 使用fis3伺服器也是挺方便的。 使用fis3的指令碼首先啟動伺服器，然後將檔案釋出到內建的伺服器。 fis
h5學習筆記： 下拉選單
滑鼠經過選單的時候，下拉選單形成起來。這個案例中，有一些比較有趣的事情。 首先要了解這種選單設計結構。我們知道ul+li經常組合列表，這種列表既有縱向，也有橫向。列表中的li元素，再包一個ul+li的組合元素。這樣一個列表下拉選單結構就變得很清晰了。
h5學習筆記（4） 居中
今天調整居中一直遇到一些問題，針對css的特性多少會發現一些無解的狀態，實在寫得太慢了，很多時候都需要靠練習去體驗。查看了一些資料，發現下面使用絕對和相對位置配合還是挺湊效。 今天想實現兩張圖片，其中一張需要居中效果，改用下面的css樣式可以顯示想要的效果
Linux學習筆記：存儲管理
linux 磁盤管理 Linux系統中所有的硬件設備都是通過文件的方式來表現和使用的，我們將這些文件稱為設備文件，在Linux下的/dev目錄中有大量的設備文件，根據設備文件的不同，又分為字符設備文件和塊設備文件。字符設備文件的存取是以字符流的方式來進行的，一次傳送一個字符。常見的有打印
學習筆記：javascript內置對象：數組對象
b- sort splice 刪除 分隔 href 結果 join() strong 1.數組對象的創建 1.設置一個長度為0的數組 var myarr=new array(); 2.設置一個長度為n的數組 var myarr=new arr(n); 3.聲明一個
學習筆記：javascript內置對象：日期對象
etsec sel mil cond ava com 描述 學習筆記 asp 2.日期對象的常用函數 2.日期對象的常用函數 Date 對象方法 方法描述 Date() 返回當日的日期和時間。 getDate() 從 Date 對象返回一個月
Linux學習筆記：btrfs
可擴展性 linux btrfs Technical Preview, 技術預覽版 BtrFS（B-tree文件系統，又稱為Butter FS或Better FS），2007由oracle開源後，得到了IBM、intel等廠商的大力支持，其目標計劃是替代linux目前的ext3/4，成為下
Linux學習筆記：rpm程序包管理
源代碼 rpm 程序包 以CentOS為例，rpm程序包管理器的相關內容如下：CentOS的程序包管理器： 程序包的命名規則： 源代碼包： software_name-VERSION.tar.gz VERSION：major.mino
kafka學習筆記：知識點整理
一個 eight true med 分組 pos 間接 fig ges 一、為什麽需要消息系統 1.解耦： 允許你獨立的擴展或修改兩邊的處理過程，只要確保它們遵守同樣的接口約束。 2.冗余： 消息隊列把數據進行持久化直到它們已經被完全處理，通過這一方式規避了數據
Emacs學習筆記：移動
size exp http spc ssi 參考 put kill ati 參考網址：https://www.emacswiki.org/emacs/NavigatingParentheses Navigating over balanced expressions C
Linux學習筆記：OSI七層模型
路由器 交換機 比特流 兼容性 linux OSI七層模型： OSI（Open System Interconnection，開放系統互連）七層網絡模型稱為開放式系統互聯參考模型 ，是一個邏輯上的定義，一個規範，它把網絡從邏輯上分為了7層。每一層都有相關、相對應的物理設備，比如路由器
Android學習筆記：超能RecyclerView組件使用總結
popu bin view設置 and col cas mda rac data 個人認為 RecyclerView組件確實值得學習並用到我們的項目中去，前面學了相關的內容。今天再補充一些相關的東東。 1，實現對RecyclerView中的數據進行加入和刪除操作。