CSS3居中规则似乎阻止其他元素正确居中

我正在尝试构建一个简单的1页HTML5/CSS3网站，并且遇到了两个与布局相关的问题，而我似乎无法包住我的头。这是我的jsFiddle。CSS3居中规则似乎阻止其他元素正确居中

正如你所看到的，下载信息按钮显示在三个州，这取决于一个多么窄或宽的窗口是：

无论它出现在联系人电子邮件，下方（如果窗口非常窄/移动）;或
如果窗口稍微宽一点，它会显示固定在它所在部分的顶部（与电话号码一致）;或
似乎钉在底部（符合第二个电子邮件）部分的它生活在如果窗口是全卵石/刷爆

我找这个按钮会表现出以下行为：

如果窗口很窄（例如在移动浏览器上），那么我希望所有东西都保持原样，按钮位于第二封电子邮件下方; 但...
一旦窗口变为而不是被固定到其div的顶部宽一点，我想它垂直居中（因此，符合第1封电子邮件）

此外，最底部有3个<img>标签，当前使用placehold.it图片。我期待水平居中，这些使他们不再出现左对齐，并在他们生活中的行均匀分布。

我相信这两个问题实际上是相同的CSS /造型问题的一部分。在我的巨大的<style>标签，你会发现下面的规则：

#home .home-inner { 
    display: inline; 
    float: left; 
    text-align: center; 
    position: relative; 
    width: 100%; 
    padding: 10px; 
}

我相信，使文字居中对齐和相对以某种方式阻止我能中心的其他元素，但我可以不知道究竟如何。有任何想法吗？

来源

2016-03-15 smeeb

看看CSS Flexbox，就在你的HTML

<div class="col s4 m2 container-img">

并为您的BTN添加新CLASSE 。 Css对于这样的页面看起来太大了 – John

你应该考虑把这个问题分解成更多的目标部分。现在，你有一个很难理解或审查的大文件。为什么不在一个问题中发布下载按钮的特定代码，并且可能在另一个问题中使用3'img'标签的代码。 –

看看http://stackoverflow.com/help/mcve。特别是*最小*部分。如果你需要处理很多代码，很难帮助你... – vals

您必须在CSS中使用媒体查询，并根据min-width和max-width定义特定的CSS。

看到这里https://jsfiddle.net/sc5o7h1p/2/

为IMG：

@media screen and (max-width: 500px) { 
    .client-logo { 
    width: 90%; 
    height: 75% !important; 
    } 
    .container-img { 
    width: 90% !important; 
    } 
}

所以我

@media screen and (min-width: 500px) { 
    .resume-download { 
    position: relative; 
    top: -117px; 
    left: 272px !important; 
    width:100% !important; 
    } 
}

来源

2016-03-17 16:53:40 Greg

CSS3居中规则似乎阻止其他元素正确居中

回答

相关问题