Image Position Divided In Half

I have a question regarding image position. I want to achieve the same image position like in here (I mean the circle logo). So basically that the image/logo is divided in half bet

Solution 1:

If you want your image/logo to override your header, you have to use absolution position

position: absolute;
left: 50%;

The top property depends of the header's position.

Solution 2:

You can try something like this:

header{
  height: 200px; 
  background: red;
  position: relative;
}

.myImage{
  border-radius: 50%;
  border: 6px solid #fff;
  width: 120px;
  position: absolute;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  box-sizing: border-box;
}

section{
  padding: 100px20px20px;
}

<header><imgclass="myImage"src="https://placeholdit.imgix.net/~text?w=150&h=150"></header><section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat a ex ac hendrerit. Pellentesque commodo feugiat lacus. Nulla at venenatis lorem. Nulla non fermentum odio, at convallis augue. Curabitur sit amet vulputate lectus, in ultrices augue. Vivamus ipsum sem, iaculis volutpat ullamcorper at, ornare dapibus velit. Nulla ut turpis sapien. Morbi ac tincidunt ante.

Praesent viverra odio in felis lacinia, in posuere odio tincidunt. Phasellus efficitur tincidunt ipsum ac vulputate. Fusce facilisis tempus dictum. Duis varius risus lectus, eget sagittis nulla semper a. Cras turpis arcu, bibendum id fringilla in, pharetra nec lacus. Proin leo odio, efficitur eget ante eget, posuere varius leo. In ut turpis mattis, sollicitudin sapien venenatis, bibendum tellus. Sed laoreet congue justo, vel posuere erat. Nunc molestie sagittis libero, eu sodales elit vehicula vitae. Phasellus ut bibendum quam. Sed rutrum sapien magna, et commodo mi interdum at. Curabitur finibus ac urna in egestas. Proin faucibus, justo vel imperdiet vulputate, lorem est auctor nisi, vel eleifend quam justo non tortor. Ut non porta nunc. Nam quis erat vitae felis pellentesque condimentum.


</section>

Solution 3:

Using flexible box it's a bit easy. HTML here:-

<divclass="parent"><divclass="circle"></div></div>

CSS Here:-

.parent{
  background-color: cyan;
  width: 100%;
  height:80px;
  position: relative;
  display: flex;
    justify-content:center;
}

.circle{
  position:absolute;
    background-color: grey;
    width:50px;
    height:50px;
    border-radius: 50%;
    border: 2px white solid;
    top:-25px;
}

Solution 4:

Here are a couple of options that you could do instead of using position: absolute:

You could use a negative top margin, like { top: -30px; } and this would move your item up the page 30px.

Or, my preference would be to use transform like { transform: translateY(-80px); }. In this case your element would by moved (translated), -80px along the Y-axis.

Solution 5:

When position: relative you can still use top/right/bottom/left to move element.

.head {
  height: 130px;
  background-color: #ffaaaa;
}

.logo-wrapper {
  text-align: center;
}

.content.logo-wrapper.logo {
  border-radius: 50%;
  border: 3px solid white;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: -20px;
  background-color: green;
}

<divclass="head"></div><divclass="content"><divclass="logo-wrapper"><divclass="logo"></div></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat tincidunt ultrices. Proin suscipit neque sit amet malesuada tincidunt. Aliquam ut sem placerat odio rutrum efficitur sed eu diam. Nunc pellentesque nunc id maximus vehicula. Nulla eu feugiat diam. Ut ultrices ligula tellus, non sagittis sapien venenatis id
</div>