如何使用 CSS Flexbox 将徽标图像对齐到右侧？

问题描述 投票：0回答：1

如何使用 CSS Flexbox 将徽标图像对齐到右侧？

  • .logo
    类设置为
    display: flex;
    ，这会将其子项变成弹性项目。

  • justify-content: flex-end;
    将弹性项目与容器的末端对齐，将徽标图像推到右侧。

  • align-items: center;
    将项目在弹性容器内垂直居中。

  • margin-right: 20px;
    在徽标图像的右侧添加一些边距，以将其与导航分开。

:root {
  --color: rgb(255, 255, 255);
  --bgcolor: rgb(160, 88, 196);
  --bbg: rgb(203, 194, 210);
  --boxmbg: rgb(65, 136, 65);
  --box1bg: rgb(240, 151, 149);
  --box2bg: rgb(76, 128, 218);
}
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: var(--bbg);
}
.nav ul li {
  list-style-type: none;
  padding: 10px;
  /* margin: 10px; */
  display: flex;

  color: var(--color);
}
.nav {
  position: fixed;
  width: 100%;
  top: 0px;
  margin: 0;
  padding: 0;
  z-index: 1;
}
ul {
  background-color: var(--bgcolor);
  padding: 0;
  margin: 0;
  display: flex;
}
.boxmain {
  margin-left: 10x;
  padding-left: 10px;
  border: 3px solid;
  box-shadow: 2px 2px 10px 5px rgb(224, 237, 128);
  margin: 60px;

  height: 70vh;
  background-color: var(--boxmbg);
}
.box1 {
  /* margin-left: 10px; */
  /* padding-left: 10px; */
  border: 2px solid white;
  /* box-shadow: 2px 2px 10px 5px rgb(224, 237, 128); */
  margin: 10px;
  height: 65vh;
  width: 40%;
  background-color: var(--box1bg);
}
.box2 {
  /* margin-left: 10px; */
  /* padding-left: 10px; */
  border: 2px solid white;
  /* box-shadow: 2px 2px 10px 5px rgb(224, 237, 128); */
  margin: 5px;

  height: 65vh;
  width: 40%;
  left: 20px;
  background-color: var(--box2bg);
  position: relative;
  left: 50%;
  top: -95.6%;
}
.box3 {
  border: 2px solid black;
  border-radius: 20px;
  margin: 5vw;
  padding: 2vh;
}
.box3 h1 {
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: 30px;
}
.logo img {
  top: 70vh;
  position: fixed;
  /* position: relative; */
  /* padding-left: 90vw; */
  filter: drop-shadow(2px 2px 1px red);
  width: 6vb;
}
<div class="logo">
  <img
    align="right" 
    src="https://searchmaro.in/wp-content/uploads/2024/04/Untitled-design6-1.png"
    alt="HEllo"
  />
  <div class="nav">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </div>
  <div class="box">
    <div class="boxmain">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    <div class="box3">
      <h1>Thanks For Visiting Search Maro</h1>
    </div>
  </div>
</div>

html css
1个回答
0
投票

将 

.logo
div 重新定位在 
.box
div 之后，然后添加 
justify-content: flex-end;
和 
align-items: center;
将徽标置于右侧和垂直中心，并删除了一些不必要的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --color: rgb(255, 255, 255);
        --bgcolor: rgb(160, 88, 196);
        --bbg: rgb(203, 194, 210);
        --boxmbg: rgb(65, 136, 65);
        --box1bg: rgb(240, 151, 149);
        --box2bg: rgb(76, 128, 218);
      }
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: var(--bbg);
      }
      .nav ul li {
        list-style-type: none;
        padding: 10px;
        /* margin: 10px; */
        display: flex;

        color: var(--color);
      }
      .nav {
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 1;
      }
      ul {
        background-color: var(--bgcolor);
        padding: 0;
        margin: 0;
        display: flex;
      }
      .boxmain {
        margin-left: 10x;
        padding-left: 10px;
        border: 3px solid;
        box-shadow: 2px 2px 10px 5px rgb(224, 237, 128);
        margin: 60px;

        height: 70vh;
        background-color: var(--boxmbg);
      }
      .box1 {
        /* margin-left: 10px; */
        /* padding-left: 10px; */
        border: 2px solid white;
        /* box-shadow: 2px 2px 10px 5px rgb(224, 237, 128); */
        margin: 10px;
        height: 65vh;
        width: 40%;
        background-color: var(--box1bg);
      }
      .box2 {
        /* margin-left: 10px; */
        /* padding-left: 10px; */
        border: 2px solid white;
        /* box-shadow: 2px 2px 10px 5px rgb(224, 237, 128); */
        margin: 5px;

        height: 65vh;
        width: 40%;
        left: 20px;
        background-color: var(--box2bg);
        position: relative;
        left: 50%;
        top: -95.6%;
      }
      .box3 {
        border: 2px solid black;
        border-radius: 20px;
        margin: 5vw;
        padding: 2vh;
      }
      .box3 h1 {
        text-align: center;
        padding: 0;
        margin: 0;
        font-size: 30px;
      }
      .logo {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 20px;
      }
      .logo img {
        filter: drop-shadow(2px 2px 1px red);
        width: 100px; /* Adjust width as needed */
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li>Contact Us</li>
      </ul>
    </div>
    <div class="box">
      <div class="boxmain">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
      <div class="box3">
        <h1>Thanks For Visiting Search Maro</h1>
      </div>
    </div>
    <div class="logo">
      <img src="https://searchmaro.in/wp-content/uploads/2024/04/Untitled-design6-1.png" alt="HEllo" />
    </div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.