显示伸缩项居中对齐

Question

我试图使第二部分或第一部分将与顶部居中对齐。

我不明白的是具有显示flex的项目与具有显示块的项目之间的关系。

第一个问题是:<<p>

/strong>是否有一种方法与flex，使顶部的标志不会看起来"居中比较第二部分居中文本?链接到钢笔:https://codepen.io/skella1/pen/vYZLdVN

<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">

<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>

body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;    
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}

Answer 1

在flex父元素上使用justify-content: Center将图像居中，然后将p元素的位置设置为绝对，并使用top/right属性进行定位。

现在你有两个元素占用了flex父元素宽度的空间。图像和P标签内容。使用justify-content: space-between将把元素不使用的宽度的剩余部分放在它们之间。反过来，不管你的边距设置为0，都会使图像的外观偏离中心，因为，只会将其置于它从父元素中占用的空间的中心。

body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}

<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">

<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>

Answer 2

问题1的答案一个真正快速解决这个问题的方法是使用CSS中的transform属性将图像相对于当前位置居中
问题2的答案简单地在.content类上设置max-width属性，以防止您谈到的滚动

body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%);   /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw;       /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;    
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}

Answer 3

如果你坚持使用flexbox作为标题，你可以这样做:

<div class="header">
<div> 
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>

.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}

请注意，这只是一个解决方案，flexbox不是唯一的解决方案。您可以使用position:absolute。