Question

我试图以可呈现的方式在标题中显示此徽标。我希望它在标题的垂直中心显示，但在文本的左边有一个合理的间隙。图像已附加。任何帮助将不胜感激！

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
}

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}

<header>
     Melbourne Public Library Catalogue Site
     <img id="icon" src="Images/Icon.png" class="icon"/>
</header>

Answer 1

剩余的高度为20％。将其拆分为两个并用作垂直边距。

＆＃13;

margin: 10% auto;

＆＃13;

Answer 2

vertical-align: middle;会帮助你：）

＆＃13;

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
}

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
vertical-align: middle; /***Apply this***/
}

＆＃13;

<header>
     Melbourne Public Library Catalogue Site
     <img id="icon" src="Images/Icon.png" class="icon"/>
</header>

＆＃13;

Answer 3

您可以使用flex。

＆＃13;

header {
  display: flex;
  width: 100%;
  height: 80px;
  background-color: #76323f;
  font-size: 40px;
  color: whitesmoke;
  line-height: 80px;
  overflow: hidden;
  white-space: nowrap;
}

p {
  margin: 0;
}

.icon {
  margin: auto;
  width: 70px;
  height: 80%;
}

＆＃13;

<header>
  <p>
    Melbourne Public Library Catalogue Site
  </p>
  <img id="icon" src="https://en.facebookbrand.com/wp-content/uploads/2016/05/flogo_rgb_hex-brc-site-250.png" class="icon" />
</header>

＆＃13;

Answer 4

将display: flex; align-items: center;用于header
根据您的要求将margin-left设置为icon

＆＃13;

header{
width:100%;
height:80px;
background-color:#76323f;
font-size:40px;
color:whitesmoke;
line-height:80px;
overflow: hidden;
white-space: nowrap;
display: flex;
align-items: center;

 }

.icon{
display:inline-block;
float:inherit;
width:70px;
height:80%;
margin-left:20px;// change as per your requirement
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

＆＃13;

<header>
    Melbourne Public Library Catalogue Site
    <img id="icon" src="http://via.placeholder.com/150x150" class="icon"/>
</header>

＆＃13;

如何在我的标题中垂直居中显示我的徽标

4 个答案: