中心事業部在屏幕上

-2

.alert{ 
    color:#555; 
    border-radius:10px; 
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; 
    padding:10px 10px 10px 36px; 
    margin:10px; 
    min-width: 500px; 
    position: fixed; 
    display: block; 
}

我怎麼會去這個中心在屏幕上，而無需使用一組出發的寬度？中心事業部在屏幕上

來源

2014-10-27 Kryptos

'保證金：汽車;'？ – gr3g 2014-10-27 20:53:44

-1

用父div包裝警報並將其設置爲text-align: center;。

HTML

<div class="alert-wrap"> 
    <div class="alert">My Alert Message!</div> 
</div>

然後設置.alert到display: inline-block;和除去position: fixed;

CSS

.alert-wrap { 
    text-align: center; 
} 

.alert { 
    color:#555; 
    border-radius:10px; 
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; 
    padding:10px 10px 10px 36px; 
    margin:10px; 
    min-width: 500px; 
    display: inline-block; 
}

工作實施例：http://jsfiddle.net/tahrmzLz/

來源

2014-10-27 20:55:19 Axel

這不起作用，你已經在上面的jsFiddle例子中刪除了'position：fixed'。 – 2014-10-27 20:56:46

@Danko - 這是原始代碼的一部分，我更新了我的答案以將其刪除。此外，我提供了一個JSfiddle，事實證明我的解決方案確實有效。 – Axel 2014-10-27 20:58:15

我認爲'position：fixed'是他CSS的一個要求，因爲它是一個警告框，OP會希望它始終出現在頂部，在這種情況下，您的代碼將無法工作。 – 2014-10-27 21:02:14

有很多方法可以將元素居中。在您的案件，不適用下面的CSS：

.alert{ 
/*add this rules*/ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
/*upto this*/ 
    color:#555; 
    border-radius:10px; 
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; 
    padding:10px 10px 10px 36px; 
    margin:10px; 
    min-width: 500px; 
    position: fixed; 
    display: block; 
}

而且，看看定心技巧here和here

你不應該記住的鏈接。只是谷歌約centering tricks，那麼你會有很多關於他們的文章。請在提問之前下次進行調查。

來源

2014-10-27 21:00:51

這裏是你如何能做到這一點，補充一點：

.alert{ 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

看看這裏：JSFiddle

來源

2014-10-27 21:02:02

margin:0 auto 0 auto;

使用此代碼

來源

2014-10-27 21:32:52 sia

中心事業部在屏幕上

回答

相關問題