中心事业部在屏幕上

-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

中心事业部在屏幕上

回答

相关问题