居中的元件，只有当屏幕是在最大宽度（添加最小宽度属性）

-3

居中的元件，只有当屏幕是在最大宽度居中的元件，只有当屏幕是在最大宽度（添加最小宽度属性）

此刻，我被定心，各种元件（由JavaScript）计算屏幕宽度并将元素的“margin-left”设置为screen.width/2 - element.width/2。

我这样做是为了当用户调整窗口大小时，元素将停留在屏幕的绝对中心，并且如果窗口大小小于50％，它将不可见。

这是一种以最大宽度为中心的典型方法，还是有一种更简单的CSS方法来实现相同的效果？

我试图实现的效果示例：Khanacademy.com的徽标。

[编辑] 感谢hungerstar，我能够弄清楚我的问题的根本原因。如果你没有设置最小宽度，那么margin：0 auto将始终保持你的元素居中。

来源

2013-07-22 SeveN

http://stackoverflow.com/q/114543/139010 –

发布你正在尝试以什么为中心。你的问题没有包含任何实质内容。 – Axel

该徽标始终居中。 – hungerstar

如果您有一组需要为中心，但需要保持左对齐或其他格式，即标题，随后的段落与列表的元素，你可以做到以下几点：

HTML

<div id="wrapper"> 
    <div class="outer"> 
     <div class="inner">... Content...</div> 
    </div> 
</div>

CSS

#wrapper { 
    margin: 0 auto; 
    width: 900px; 
} 
.outer { 
    height: 50px; 
    left: 50%; 
    position: relative; 
    display: inline-block; /* or float: left; */ 
} 
.inner { 
    right: 50%; 
    position: relative; 
}

来源

2013-07-22 22:21:57 hungerstar

这个解决方案也不适合我。当我调整窗口大小时，元素保持居中，这不是所需的结果。 – SeveN

你有最大宽度的网站？如果是这样，那么使用CSS3媒体查询。你的问题对期望的结果有点模糊。我会重申你的目标是什么。 – hungerstar

我试图只在浏览器处于最大宽度时才将徽标居中。所以基本上，我希望窗口是一个框架，我不希望徽标在重新调整窗口大小时“重新居中”。 – SeveN

你可以使用CSS来实现这一点。

margin: 0 auto;

EXAMPLE

来源

2013-07-22 21:52:38

这只适用于块元素，顺便说一句 – Ian

这不适合我。当我调整窗口大小时，元素保持居中，这不是我想要的。 – SeveN

对于框元件，赋予一个明确的宽度加上margin: 0 auto是基本技术。内联（和内嵌块）元素，例如图像，您可以在父容器上使用text-align:center进行居中。

来源

2013-07-22 21:59:33

居中的元件，只有当屏幕是在最大宽度（添加最小宽度属性）

回答

相关问题