带有标志的标题
- 我想将主页等与徽标对齐，但我认为徽标占据了菜单标题顶部的所有空间，我不知道如何减少它，我已经尝试了向左或向右的边距以及填充，但这没有帮助。我还想知道是否有消极的CSS规则是一种糟糕的做法，或者到目前为止我的代码中是否有任何糟糕的做法。抱歉英语不好，我不是本地人
<!DOCTYPE html>
<html>
<head>
<title>Heloisa Antoniely │ Makeup</title>
<link rel="stylesheet" type="text/css" href="Makeup.css">
<meta charset="UTF-8">
<meta name="author" content="Thiago Marvin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="main-header">
<div class="Logo">
<img src="photos/Logo.png.png" alt="Makeup" class="center">
</div>
<div class="social">
</div>
<div class="header-menus">
<ul>
<li>
<a href="">Home</a>
<a href="">Contato</a>
<a href="">Portfólio</a>
<a href="">Localização</a>
</li>
</ul>
</div>
</header>
<section>
</section>
</body>
</html>
body{
background-color: #137B77;
margin: 0;
padding: 0;
}
header{
background-color: #45a29e;
margin: 0;
padding:0;
justify-content: baseline;
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 15%;
vertical-align: middle;
margin-bottom: -124px;
margin-top: -65px;
}
.main-header{
margin-top: 0px;
margin-bottom: 62px;
}
.header-menus{
padding-top: 0;
}
.header-menus ul li {
list-style: none;
color: #000000;
}
.header-menus ul li a{
color: #000000;
text-decoration:none;
padding-left: 30px;
font-size: 15px;
line-height: 2.0;
font-family: 'STIX Two Math', serif;
}
由于div元素是块元素，它们占用父元素的所有可用水平空间，即一个完整的"行"；。
请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
我建议在.main-header类上使用display: flex。默认情况下，子元素将排列成行(flex-direction: row(。
align-items属性可用于垂直排列元素。
请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.main-header {
display: flex;
align-items: center;
}演示：https://jsfiddle.net/u3gv6s7f/
给徽标一个x px的宽度。这会给它一个固定的尺寸。您可以执行width=100%，并确保将容器div样式设置为内联块或使用flex box来设置其大小。
.main-header {
display: flex;
}
img {
width: 100%;
}
这应该使标题中的每个元素都显示在一行中。为了更好地理解柔性盒，请多看它。https://flexboxfroggy.com/是一种很好的资源。
您可以在主div中使用flexbox，它包装徽标并链接
.main-header{
margin-top: 0px;
margin-bottom: 62px;
display: flex;
justify-content: center; //you can do also space-between or space-evenly
align-items: center;
}