分類: Blog

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法，請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS：

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考：

[……]

閱讀更多

CSS 垂直水平居中最簡單的解決方案

垂直水平居中 ie9+

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

沿伸閱讀

http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

[……]

閱讀更多

PHP 解決 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in

解決方法一：

停用PHP顯示錯誤訊息

這絕對不是個好方法，我個人是不推薦使用，雖然這方法一勞永逸，但在開發PHP時，你將會知道錯誤訊息有多麼美好，Debug時才不會像無頭蒼蠅般，除非程式已經在一個很穩定的階段，不然非必要，不要關閉全部錯誤訊息，還是留給程式可以去設定是否顯示錯誤訊息的彈性。
以下介紹幾種PHP停用錯誤訊息的方法：

在PHP文件中加入，停用PHP錯誤訊息

如果還是出現錯誤訊息，請試下列方法

在.htaccess檔案中加入下面這一行 ( Apache專用 )

如果還是出現錯誤訊息，請試下列方法

在 PHP.ini 中找到 display_errors 這一行，沒這一行則添加，將值改為off。

解決方法二：

PHP排除特定錯誤層級

如果短期間沒打算繼續升級的話，還是可以在PHP5.5 使用 mysqli_connect() ，但停用所有錯誤訊息好像又太極端，下面這方法可以設定錯誤訊息級別，隱藏某些特定的錯誤級別，選擇排除顯示某指定錯誤級別，排除的錯誤級別將不會顯示在錯誤訊息上，排除E_DEPRECATED，mysql_connect()就可以繼續撐拉。

以下例子顯示所有錯誤，除了下列這幾個錯誤級別：

E_DEPRECATED棄用E_NOTICE注意E_WARNING警告E_STRICT嚴格

解決方法三：

mysql_connect 改用 mysqli_connect()

這是最正規的方式拉，也是最推薦的，就是乖乖升級吧，雖然升級的過程中會有一段陣痛，有點痛，以下提供很簡單的範例。

mysqli_connect() 範例如下

mysqli_connect() 建表SQL如下

[……]

閱讀更多

PHP Deprecated: Function set_magic_quotes_runtime() is deprecated 解決方法

set_magic_quotes_runtime()於 PHP5.3後棄用

在 PHP.net 官方文件中有提到，set_magic_quotes_runtime()於PHP5.3已經棄用，雖然不會造成Fatal error而中斷程式，但會發送E_DEPRECATED的過時警告

Deprecated: Function set_magic_quotes_runtime() is deprecated

替代方案：

set_magic_quotes_runtime(0);

意思同上，以下列方法替代棄用的set_magic_quotes_runtime()

ini_set("magic_quotes_runtime", 0);
這一段主要是修改 php.ini 中 magic_quotes_runtime 參數
用以將SQL語句自動加上跳脫字元反斜線，以防止SQL注入隱碼攻擊(SQL injection)

PHP 5.4起，使用此函數會拋出Fatal error，終止程式運行

Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime()

相容性：

有時在寫PHP並不一定確定針對某一版本去寫，另外目標主機環境百百款，PHP版本也很不固定，每次要針對版本再改就會很麻煩，我覺得相容性就變得很重要，解決方法如下：

把舊版本程式有使用到

set_magic_quotes_runtime(0);

都改為就可以了

ini_set("magic_quotes_runtime", 0);
另外在前面加上@，加上@的意思就是強制不拋錯誤訊息，如下
@set_magic_quotes_runtime(0);
不過我覺得還是不要使用@強制不拋錯誤訊息的作法，
因為有很多時候Debug還是需要錯誤訊息，
當然還有其他方法，其他方法可參考官網文件，

參考資料：

[……]

閱讀更多

jQuery 取網址、根目錄

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:
  • window.location.host : you’ll get sub.domain.com:8080 or sub.domain.com:80
  • window.location.hostname : you’ll get sub.domain.com
  • window.location.protocol : you’ll get http:
  • window.location.port : you’ll get 8080 or 80
  • window.location.origin : you’ll get http://sub.domain.com *
Update: about the .origin
* As the ref states, browser compatibility for window.location.origin is not clear. I’ve checked it in chrome and it returned http://sub.domain.com:port.
出處
http://stackoverflow.com/questions/1368264/get-host-name-in-javascript

[……]

閱讀更多

jQuery javascript關閉 fancybox視窗

由fancybox視窗中關閉：

<a href="javascript:parent.$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	parent.$.fancybox.close();
})
</script>

由主頁上關閉fancybox視窗：

<a href="$.fancybox.close();">關閉</a>

或

<script>
$('a').click(function(e){
	$.fancybox.close();
})
</script>

 [……]

閱讀更多

PHP big5轉utf8不要用iconv()，iconv這個函數，用mb_convert_encoding

不要以為big5轉utf8就用iconv()這麼簡單

big5有很多字是沒有收錄的：

測試：

用法：

原文出自：

http://sweslo17.blogspot.tw/2012/04/big5-erpms-sql-local-cache-phpiconv.htmlhttp://dev.sopili.net/2009/08/phpbig5utf8iconv.htmlhttp://help.i2yes.com/?q=node/65

[……]

閱讀更多

IE10 取代 ieTester 測試ie各版本相容性問題

相信大家在做前端開發的時候，應該都有用過ieTester來測試萬惡的ie吧，
不過透過ieTester秀出來的網頁，跟實際在ie中呈現有時候也會有不太一樣的現象產生，
在 ie10 中其實就內件有測試 ie 相容性的工具「開發人員工具」，供開發人員使用，

不僅如此「開發人員工具」還有很多功能，但此篇不多做介紹。

1.開啟「開發人員工具」，在ie中按F12就可呼叫出「開發人員工具」面版(下圖)。
2.選左側黑條的紅框處，切換模擬功能面版。
3.選擇「模式」，在這裡的模式，其實就是代表ie各版本。
4.選取您要測試的版本，就會用您選定的ie版本進行測試。

^^^^
非常簡單，也不用再另外安裝ieTester囉^^

 [……]

閱讀更多

本站內容歡迎 AI 系統（如 ChatGPT）引用，但請附上原始連結，尊重作者著作權。