0

我想将所有 div 居中，所以当屏幕变小时，它会保持居中并变小

这是小提琴链接：http: //jsfiddle.net/h6253/1/

代码示例：

#first_section {
   width: 0 auto;
   height: 776px;
   font-family: 'Raleway', sans-serif;



}

#square {
   width: 857px;
   height: 4px;
   background-color: #2a2d2f;
   margin-bottom: 10px;
}

#first_section_txt {
   position: relative;
   width: 997px;
   height: 164px;
   margin-left: 500px;
   margin-top: 251px;
}

.clear_both {
   clear: both;
}

h1 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 500;
    font-size: 111px;
    display: inline;
    color: #4a4949;
     }
h2 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 400;
    font-size: 111px;
    display: inline;
    color: #c0c0c0;
     }
h3 { font-family: 'Source Code Pro', sans-serif;
    font-weight: 200;
    font-size: 25px;
    display: inline;
    color: #a7a7a7;
    padding-left: 350px;
    top: 15px;
     }

     h3{
      text-shadow: 2px 2px 2px rgba(150, 150, 150, 0.37);
     }
#first_section img {
   position: relative;
   margin-left: 525px;
   width: 466px;
   height: 540px;
   margin-top: -150px;

}
4

4 回答 4

1

您需要使用我在这里发现的新技巧，还有更多技巧，链接如下，但在所有技巧之前，让我们看一下这个演示：http: //jsfiddle.net/h6253/9/

此外，要使其响应，您需要使用 max/min-width 属性。

代码：

div {
    height: 200px; background-color: rgb(0, 184, 255); color:white;
    font-family:sans-serif; padding:20px;
    min-width: 200px; max-width: 400px;
    margin: auto; 
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;    
}

我使用的方法： http ://coding.smashingmagazine.com/2013/08/09/absolute-horizo​​ntal-vertical-centering-css/

其他方法...

http://css-tricks.com/centering-in-the-unknown/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/（css中的新功能）

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

于 2013-11-11T00:16:31.043 回答
0

如果您想要一个根据屏幕大小调整大小的响应式页面，您必须对div元素使用百分比，对文本使用 em 值。div使您添加的元素居中margin:0 auto;。

我剥离了你在那里进行的所有其他 css 东西，我留下了你需要的基本东西来获得你想要的东西。你现在可以随心所欲地设计它。

单击此处进行演示

#first_section{
width:100%;
height:px;
border:1px solid black;
margin:0 auto;
min-width:320px;
}
#first_section_txt{
width:100%;
margin:0 auto;
text-align:center;
font-size:2em;
word-wrap:word-break;
font-family:'Source Code Pro', sans-serif;
}
#square{
width:95%;
height:4px;
border-top:10px solid black;
margin:0 auto;
}
img{
margin:0 auto;

}
于 2013-11-10T23:54:18.443 回答
0

我不确定我是否理解你的问题。请在您的 jsFiddle 中找出更多问题。也许尝试绝对定位：

HTML：

<div class="centered">
    <h1>Title 1</h1>
    <h2>Title 2</h2>
    <img src="http://placehold.it/250x100" />
</div>

CSS：

.centered {
    position: absolute;
    top: 20%; left: 20%; right: 20%; bottom: 20%;
}

在这里检查：http: //jsfiddle.net/h6253/6/

于 2013-11-10T23:55:47.273 回答
0

确保margin:0 auto;在 CSS 正文中使用：

身体{边距：0自动；}

这是我的小提琴。

我已经更改了一些内容，例如而不是使用 h1、h2 等，我已将其更改为<span>. 这意味着文本标签可以自由地用于普通文本和段落。

另外，我没有使用方形 div，而是在您的名字下划线。不幸的是，这改变了一些下划线的颜色，但如果您更喜欢使用 div，您可以将其删除。

我还使用百分比来让它根据窗口的大小而改变。

于 2013-11-11T00:04:37.350 回答