尝试将其他div内的垂直和水平div居中时,我遇到了一些问题。
这就是我想要做的:
我还读过如何水平居中<div>?以及如何使“position:absolute”元素居中。
这个问题与这两个问题都不重复,因为我不想把一个div作为中心position:absolute
。我想把一个div position
放在一个div中,而div里面没有属性position:absolute
。
margin: 0 auto;
并且width:50%
不起作用。
对齐图像,文本和按钮每个都需要不同的方法,我不知道。
这是我的代码:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(back-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
background-color: gray;
}
html {
min-height: 100%;
}
#container {
width: 80%;
height: 100%;
margin: 0 auto;
}
.top-container,
.center-container,
.side-container {
position: absolute;
}
.top-container {
left: 20%;
top: 0;
height: 30%;
width: 50%;
background: red;
text-align: center;
}
.center-container {
left: 20%;
top: 40%;
height: 50%;
width: 50%;
background: blue;
text-align: center;
}
.side-container {
left: 70%;
top: 14%;
height: 80%;
width: 30%;
background: green;
}
.top-container #logo {
/* background: black; */
margin-top: 50px;
width: 50%;
height: 50px;
}
/* .top-container #logo img {
display: inline-block;
} */
.top-container .title {
margin-top: 50px;
width: 100%;
height: 40px;
/* margin: 0 auto; */
background: black;
border-bottom: 1px solid red;
}
.center-container .title {
/* margin: 0 auto; */
background: greenyellow;
height: 40px;
width: 100%;
border-bottom: 1px solid red;
}
#text-box {
color: white;
margin: 0 auto;
width: 100%;
height: 50%;
background: black;
}
.center-container #text-box {
background: black;
height: 100%;
}
#text-box p {
margin: 10px 10px;
padding: 5px;
text-align: left;
}
#text-box span {
color: cyan;
margin: 10px;
text-align: right;
}
.side-container .title {
/* margin: 0 auto; */
background: greenyellow;
height: 40px;
width: 100%;
text-align: center;
border-bottom: 1px solid red;
}
#settings-button {
width: 50%;
background: none;
border: 2px solid red;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 0 auto;
height: 40px;
}
<div id="container">
<div class="top-container">
<div id="logo"><img url="logo.png"></div>
<div class="title">
<h1>Home Page</h1>
</div>
</div>
<div class="center-container">
<div class="text-box">%PLACEHOLDER_1%</div>
</div>
<div class="side-container">
<div id="text-box">
<p>URL: %PLACEHOLDER_URL%</p>
<p>URL Refresh Rate: %PLACEHOLDER_URR%</p>
<p>Brightness: %PLACEHOLDER_Brightness%</p>
</div>
<input id="settings-button" type="submit" name="" value="Settings">
</div>
</div>
这是结果:
有些问题我不知道如何修复:
#logo
。
它div
有background: black
。它正在使用width:50%
并且它在内部很好地居中.top-container
但是img
它不以#logo
div的中心为中心。我试过了:这个和这个,但它只会让事情变得更糟。#settings-button
内.side-container
。**这是一样的#logo
。 .center-container .title
并.side-container .title
表现得像他们所设定的那样top= 5px
。:他们为什么不放置在它们的包装的div的开始.center-container
和.side-container
分别?我已经习惯text align: center
了.title
水平居中的文本。为了使文本垂直居中,还需要做些什么?
我用过width:100%
文本div
s因为我不需要div
s居中。改变width:
到任何百分比仍然使其居中。
我试着加入display:grid
和flex
和inline-block
,但他们只会使事情变得更糟。
这是我能够去的。
发布于 2019-05-14 11:06:31
我试图修复您的代码示例,但很难将问题的各个部分与您的代码示例相关联。相反,我会告诉你如何自己修复它。
垂直居中非常棘手 - 除非您使用flexbox或CSS Grid。然后这很容易。老实说,如果你花费大约30分钟摆弄flexbox,你就会把它弄下来 - 而且布局很简单,而且不像花车那样有意义。
Bootstrap有一个原因可以将他们的整个平台从Bootstrap3重新安装到Bootstrap4,主要是为了从使用浮动更改为flexbox。
Flexbox需要两件事:
您在父项上打开flexbox :display:flex;
然后,有各种开关。有些是在父级上设置的(如果是justify-content
),但其他可能在项目上设置(如同flex-grow:1
)
观看教程,从现在起40分钟后你的问题就会解决 - 你就会知道flexbox。
PS我与视频或其主持人没有关系 - 我很幸运能够发现它,现在将其传递出去。
https://stackoverflow.com/questions/-100006720
复制相似问题