html 如何在红色背景中对齐徽标，并在所有侧面使用相等的填充

yx2lnoni 于 2023-06-20 发布在其他

关注(0)|答案(2)|浏览(111)

下面的代码是

我需要的是红色背景有相同的填充围绕th标志，现在它有过多的左部分，红色背景的愿望结果是

我该怎么做
html代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="navigationContainer fixedHeader">
        <div class="leftContainer">
            <a href='/' class="logoContainer">
               hello
            </a>
        </div>
        <div class="middleContainer">
            <div class="customSelectContainer">
                <select id="lang" placeholder="def">
                    <!-- Options will be added by JS -->
                </select>
            </div>
            <button class="generateButton" onclick="handleGenerateButtonClick()">Auto Generate</button>
        </div>
        <div class="rightContainer">
            <div class="userProfileWrapper" onmouseenter="handleMouseEnter()">
                <div class="userInitials">th</div>
                <div class="dropdown">
                    <div class="content">
                        <div class="list">
                            <p onclick="handleSignOut()" class="title">Sign Out</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

styles.css代码：

.navigationContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 56px;
  background: #fff;
  box-shadow: 0px 1px 0 rgba(57, 71, 81, 0.16);
  flex: 0 0 300px;
  column-gap: 24px;
}

.fixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.leftContainer {
  flex: 1;
  padding: 0 16px;
}

.logoContainer {
  cursor: pointer;
}

.middleContainer {
  display: flex;
  gap: 24px;
  align-items: center;
}

.customSelectContainer {
  margin-top: 3px;
  margin-bottom: 3px;
  padding-left: 15px;
}

.rightContainer {
  flex: 1;
}

.userProfileWrapper {
  margin-right: 8px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  transition: 0.3s;
  background: red;
  padding: 8px;
  box-sizing: border-box;
}

.userProfileWrapper:hover {
  background: rgba(43, 69, 87, 0.08);
}

.userProfileWrapper:hover .dropdown {
  max-height: 1000px;
  overflow: visible !important;
}

.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: overflow 0s 0.3s, all 0.3s;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 372px;
  transform: translate(0, 100%);
  filter: drop-shadow(0px 8px 16px rgba(57, 71, 81, 0.16));
}

.content {
  padding: 4px 0;
  background: #fff;
}

.userInitials {
  background-color: #D9EDFF;
  margin-left: auto;
  font: 14px/20px 'NotoSansBold', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.list {
  cursor: pointer;
}

.list.disabled {
  opacity: 0.5;
  cursor: no-drop;
  user-select: none;
}

.list .title {
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  padding: 8px 16px;
}

Html

来源：https://stackoverflow.com/questions/76469360/how-to-align-a-logo-within-a-red-background-with-equal-padding-on-all-sides

2条答案

按热度按时间

elcex8rz1#

试试这个

.rightContainer {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.userProfileWrapper {
  margin-right: 8px;
  position: relative;
  height: 100%;
  align-items: center;
  transition: 0.3s;
  background: red;
  padding: 8px;
  box-sizing: border-box;
}

赞(0）回复(0）举报 2023-06-20

sirbozc52#

你可以给予标题一个网格的显示，给标题一个固定的高度，给标志容器一个宽度，这个宽度和标题的高度相同。现在你可以给予logo容器一个border-box的box-sizing，这样你就可以在里面设置一个padding。然后，您可以为圆指定100%的宽度和高度以及50%的边界半径。

:root {
 --header-height: 5em;
}

header {
 height: 5em;
 width: 100%;
 display: grid;
 grid-template-columns: 1fr var(--header-height);
}

.logo-conainer {
 box-sizing: border-box;
 padding: .5em;
}

.circle {
 width: 100%;
 height: 100%;
 border-radius: 50%;
}

希望这有帮助！

赞(0）回复(0）举报 2023-06-20

我来回答

html 如何在红色背景中对齐徽标，并在所有侧面使用相等的填充

2条答案

相关问题

热门标签

最新问答