我做错了什么?我想在这里的东西是在屏幕的中间,但无论我尝试,我不能让它工作。
* {
box-sizing: border-box;
}
body {
max-width: 100%;
line-height: 1.5;
}
#wrapper {
max-width: 100%;
}
.bild {
padding: 2em 0 0 2em;
}
img {
max-width: 60%;
padding-top: 1em;
border-radius: 100px;
float: left;
display: block
}
h1 {
font-weight: 900;
font-size: 2em;
float: right;
margin-right: 25em;
margin-top: 2.2em;
}
.floatright {
float: left;
margin-left: 10em;
}
<body>
<div id="wrapper">
<div class="bild">
<img src="images/jag.jpg" alt="En bild på mig">
<h1>Välkommen!</h1>
<span class="floatright">Jag heter Patrik Qvarnström</span>
</div>
</div>
</body>
不能真正把内容放在中心:
5条答案
按热度按时间oxf4rvwz1#
移除浮动:从img向左添加margin:汽车像这样:
avkwfej42#
如果Flexbox解决方案适合您-在这里它是(它是非常酷的居中和总):
oxcyiej73#
gstyhher4#
1.**在包含元素上设置宽度:**在包含(父)元素
.bild
上Declare一个width
或max-width
属性,例如:max-width: 55%;
-相应调整此值以满足要求。1.**水平居中对齐:**在包含(父)元素
.bild
上将简写margin
属性规则的值decompose为auto
,例如:margin: auto;
-这将允许包含元素水平居中。代码嗅探器演示:
总结:
.bild
是div
元素div
元素是一个 * 块级 * 元素(占用整个水平宽度,不像 inline 元素)width
属性,**2.**声明margin
属性,值为auto
display: block
成为 * 块级 * 元素float
属性,上述技术将不会表现得像解释的那样,float
将否定任何水平对齐的尝试,除非有问题的元素已被声明为flex-box
display,例如:display: flex
*实际演示:
uz75evzq5#
P.S.'s answer更进一步使用嵌套的flexbox。
创建
#wrapper
和.bild
flexbox容器。这里的技巧是用flex: 0 0 0;
使.bild
成为一个“不灵活”的flex项,我还将h1
和span
元素 Package 在div
中,因此img
和div
是嵌套的flexbox中的两个flex项。有关更多详细信息,请参见代码中的注解:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/