Centering Image Container between two sections-CodePudding

I have been trying to center an image container between a div and a section. However, when I manipulate the box's margins or the figure, the size of the box changes along with the position of the image container. I want the image container to lie between the section and the box.

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />
  <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=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="height: fit-content;">
  <nav  role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
    <div >
      <div >
        <img src="assets/Logo.png">
      </div>
    </div>

    <div id="navbarBasicExample">
      <div >
        <div >
          <div >
            <button  style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Language
                        </button>
            <button  style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Profile
                        </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div  style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 2%;">
    <figure  style="margin: auto;">
      <img  src="https://bulma.io/images/placeholders/128x128.png">
    </figure>
  </div>
</body>

CodePudding user response：

Try this approach.

Place absolute positioned circle image inside your relative positioned navbar. Now give bottom: 0 to circle to make sure it remains at the bottom of the nav irrespective of what is its dimensions.

Now give translateY(50%) to move the circle 50% below its height while respecting the bottom: 0. This will make sure that the circle remains at its position.

Implementation:

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

nav{
  position: relative;
  padding-block: 3rem;
  background-color: lightgrey;
}

.circle{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);

  width: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  
  background-color: seagreen;
}

<nav>
  <div class='circle'></div>
</nav>

CodePudding user response：

You should give the image an absolute position while giving the main dive relative position and a certain height where your image is located. In addition, you can add the features you want by giving the left, right and bottom properties to center. I created it as you requested below. I hope it works for you.

<!DOCTYPE html>
<html lang="en" style="height: 100%;">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />
  <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=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="height: fit-content;">
  <nav  role="navigation" aria-label="main navigation" style="background-color: #EEF2F3;">
    <div >
      <div >
        <img src="assets/Logo.png">
      </div>
    </div>

    <div id="navbarBasicExample">
      <div >
        <div >
          <div >
            <button  style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Language
                        </button>
            <button  style="font-family: Montserrat; font-size: bold; color: #FFFFFF; background-color: #53C0B3; border-radius: 5%;">
                            Profile
                        </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div  style="box-shadow: none; background-color: #F6F7F8; border-radius: 0%; margin-bottom: 0%; position:relative; height:150px;">
    <figure  style="margin: auto; position:absolute; left:0; right:0; bottom:-48px">
      <img  src="https://bulma.io/images/placeholders/128x128.png">
    </figure>
  </div>
  <div style="background-color: #A020F0; color:white">
    Hi everyone
  </div>
</body>