元素加了position:absolute則該元素的text-align:center居中失效的解決辦法

来源:http://www.cnblogs.com/beileixinqing/archive/2017/12/04/7977969.html
-Advertisement-
Play Games

當元素變為position:absolute時,該元素不占據文檔流,text-align:center失效,則可以通過上述方法使元素中的內容垂直水平居中。 或者: 如果僅僅時元素中的文字居中的話, 給該元素加width:100%;text-align:center;就可以成功實現了。 ...


    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform:translate(-50%,-50%);

當元素變為position:absolute時,該元素不占據文檔流,text-align:center失效,則可以通過上述方法使元素中的內容垂直水平居中。

 

或者:

如果僅僅時元素中的文字居中的話, 給該元素加width:100%;text-align:center;就可以成功實現了。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • express學習(三)—— cookie和session cookie存在瀏覽器中,最大隻能保存4K數據,不安全 session存在伺服器中,不能獨立(先讀取cookie再讀取session),較安全 cookie 工具 發送cookie: 基本的東西先寫好: 讀取cookie 接著,用cooki ...
  • 在JavaScript高級程式設計書中看到 因此,要模擬出重載的效果,只有兩種方法:1.參數的類型;2.參數的數量 本人一開始學會的通過參數類型來實現重載的方法 用Switch 語句通過參數類型來模擬出重載效果。 關於Switch 語句還有個有個小技巧:case的連續執行 當執行函數sum('sum ...
  • 北京的冬越來越冷。但是擋不住戰士們勇往直前激情(一大清早地鐵站依舊還是辣麽多人排隊~激情四射的)。 今天分享兩個電子相冊。 動畫版: 因為圖片地址是本地地址所以賦效果圖給各位大神指點: 各位看客老爺肯定說說好的兩個相冊呢? O(∩_∩)O哈哈~別急。。請看下一篇博文~ 忘了這個了commom: ...
  • 官網:https://daneden.github.io/animate.css/ animate.css 是一款跨瀏覽器的動畫庫。 使用方式: 在頁面的 <head>中引入樣式文件: 給你想要添加動畫效果的元素加上 animated 樣式,如果想要動畫迴圈執行的話,你需要加上 infinite 樣 ...
  • 方案描述:由於採用單頁面,所以按鈕切換時會刷新頁面 1、安裝 react-intl babel-plugin-react-intl json-loader 2、修改webpack.config.js 與 webpack.production.config.js entry: { en_US: pat ...
  • HTML其實還是蠻容易學習的,無非就是一些標簽、格式的填寫,大學的時候也做過網站設計,所以這裡主要記錄一些常用的HTML標簽、屬性以及書寫方法等。 一、常見HTML格式 主要包含文件type,html標簽、head標簽、body標簽三個主題標簽,其中Head主要包含字元集、描述、關鍵字等信息,而Bo ...
  • href="{$CATEGORYS[45][url]}" 鏈接寫法, {$CATEGORYS[45][catname]} 標題寫法在show頁面中 src="{$thumb}" 圖片展示 {$content};文字內容 ...
  • Ajax大家每天都在用,jquery庫對Ajax的封裝也很完善、很好用,下麵我們看一下他的內部原理,並手動封裝一個自己的Ajax庫。 更多有關ajax封裝及數據處理,請參看上海尚學堂《Ajax中replace+Jq封裝的ajax》、《ajax+json數據處理》 一、原理 原生Ajax的發送需要四步 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...