CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alexander Pilz
Alexander Pilz

Reputation: 300

Center image on border of a div

I'm trying to achieve this design: enter image description here
The Black Circle is an image (ignore the rectangel). I don't now how to get this working, e. g. centering the circel on the border. Maybe some of you guys can do this?
I made a jsfiddle so you can play around with it.

HTML for StackOverflow:

 <div class="container">
    <div class="manager-textbox">
      <img src="http://www.altpress.com/images/uploads/news/Hello_Kitty.jpg" class="manager-portrait" style="height:100px">
      <div class="manager-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean auctor malesuada mauris, sit amet tempus erat dictum eget.
          In eleifend arcu augue. Quisque enim est, eleifend vitae est nec, gravida congue ligula. Proin id convallis
          turpis.
        </p>
      </div>
    </div>       
  </div>

Upvotes: 2

Views: 5736

Answers (4)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Try this:

DEMO HERE

CSS

// managers
.manager-headline {
    font-size: 24px;
    color: $xcellent-blue;
    text-align: center;
}

.manager-textbox {
    background-color: #f4f6f9;
    box-shadow: 0 -3px 0 0 #303f9f;
    position: relative;
    margin-top: 60px;
}

.manager-text {
    margin-top: 40px;
    padding-top: 90px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

#manager  .teaser-header-what {
    padding-left: 0px;
}
.manager-portrait {
 position: absolute;
 top: -50px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 border-radius: 50%;
 border: solid 2px red;
}

Upvotes: 3

Phantom
Phantom

Reputation: 377

Just change you .manager-portrait class to this:

.manager-portrait {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    border: 3px solid;
}

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362430

Use CSS transform like this..

.manager-portrait {
 position: absolute;
 left: 50%;
 transform:translate(-50%,-50%);
}

https://jsfiddle.net/Lxwm2aq4/

Upvotes: 1

margarita
margarita

Reputation: 894

.first{
  width: 100%;
  position: relative;
  height: 300px;
  background-image: url("http://stuffpoint.com/sea-and-beach/image/27652-sea-and-beach-summer.jpg");
  background-repaet: no-repeat;
  background-size: cover;
}
.second{
  width: 100%;
  height: 500px;
  position: relative;
  background: pink;
}

.imageContainer{
  position: relative;
  width: 100px;
  top: -30px;
  background: yellow;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  background-image: url("http://i2.cdn.cnn.com/cnnnext/dam/assets/130203065116-beyonce-12-super-169.jpg");
  background-position: center;
  background-size: cover;
  border: 4px solid pink;
}
<div>
  <div class="first">
    
  </div>
  <div class="second">
    <div class="imageContainer">
      
    </div>
  </div>
</div>

Check this one, it is similar: Image position divided in half

Upvotes: 1

Related Questions