Question

存在一个类为favourite的div，该div在标题部分中未对齐。是的，这是一个反应项目，但对于该问题，它像普通项目一样进行编辑。

<div className='header'>
  <img class='profilePhoto' src='./userIcon'></img>
  <div class='brand-logo'>
  </div>
  <div class='favourite'>Favourite</div> <!-- This Favourite is going outisde div.header-->
</div>

CSS文件：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100vw;
  height: 5rem;
  background: #2475b0;
  position: fixed;
}

.profilePhoto {
  position: absolute;
  margin-left: 32px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

.brand-logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.favourite {
  display: inline-block;
  position: relative;
  right: 3rem;
}

品牌徽标CSS

.icon-box {
  background: #eaf0f1;
  width: 19rem;
  height: 75%;
  border-radius: 1rem;
  text-align: center;
  vertical-align: bottom;
}

.brand-name {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
  font-family: 'Luckiest Guy', cursive;
  font-size: 2rem;
}

图片预览：

任何提示都会有所帮助。.提前谢谢

Answer 1

在喜欢的课程中尝试这段代码。

    .favourite {
       text-align: right;
       position: relative;
       right: 3rem;
       margin-top: -45px;    
      }

根据需要调整边距顶部。

Answer 2

增加标题div的高度

.header {
  height: 10rem;
}

Answer 3

您无需为使徽标位于中心位置而放位置。只需从标头中删除固定高度，然后尝试使用填充即可。希望能为您提供帮助。

    * {
    		padding: 0;
    		margin: 0;
    		box-sizing: border-box;
    	}

    	.header {
    		width: 100vw;
    		padding: 20px;
    		background: #2475b0;
    		position: fixed;
    	}

       <div class='header'>
    		<div class='brand-logo'>
    			<img class='profilePhoto' src='/userIcon'>
    		</div>
    		<div class='favourite'>Favourite</div> <!-- This Favourite is  going outisde div.header-->
    	</div>

Answer 4

添加显示：内联代码块可分为3个类：

.profilePhoto, .brand-logo, .favourite {
  display: inline-block;
}

并删除类收藏夹中的position属性。再说一遍，我认为您应该使用'class'属性，而不是像这样的'className'：

<div className='header'>

Answer 5

尝试此操作只是增加高度和填充。

.header {
  width: 100vw;
  height: 10rem;
  background: #2475b0;
  padding-bottom:10px;
  position: fixed;
}

Answer 6

谢谢：https://stackoverflow.com/users/2875348/ravibagul91

您之所以会这样，是因为.brand-logo的身高达到100％！当我删除时：

height: 100%

然后代码运行正常... 我只是简单地删除了flexbox并使用position属性来对齐我的.brand-logo

.brand-logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 7

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100vw;
  height: 5rem;
  background: #2475b0;
  position: fixed;
}

.profilePhoto {
  position: absolute;
  margin-left: 32px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

.brand-logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.favourite {
    display: flex;
    position: fixed;
    top: 50px;
    left: 10px;
}

<div class='header'>
    <img class='profilePhoto' src='./userIcon'>
    <div class='favourite'>Favourite</div>
    <div class='brand-logo'></div>
</div>

为什么我的元素超出标题元素

7 个答案: