CODEWITHSUNDEEP
htmlcss
nCore
nCore

Reputation: 2087

Div circle images issue

I'm trying to make these 4 images to be circle but I guess I'll just use images later but anyway. I'm trying to put a title under the image (bottom-middle) but instead its at the top. This is what happened.

.services img{
  border-radius: 50%;
  padding-left: 10px;
  float: left;
  display: block;
}
<section class="services">
  <h1 style="text-align:center; font-size:38px;">Services we offer</h1>
  <div class="circle">
    <img src="http://placehold.it/290x250">
    <h3>Title</h3>
  </div>
  <div class="circle">
    <img src="http://placehold.it/290x250">
    <h3>Title</h3>
  </div>
  <div class="circle">
    <img src="http://placehold.it/290x250">
    <h3>Title</h3>
  </div>
  <div class="circle">
    <img src="http://placehold.it/290x250">
    <h3>Title</h3>
  </div>
</section>
enter image description here

So it'd look like my design. enter image description here

Upvotes: 0

Views: 60

Answers (2)

Morten OC
Morten OC

Reputation: 1784

.circle{
    text-align: center;
    display: inline-block;
}
.services img{
    border-radius: 50%;
    padding-left: 10px;
    display: block;
}

http://jsfiddle.net/mx7xknzr/1/

Upvotes: 1

user2883815
user2883815

Reputation:

You need also to set the .circle class to float left:

.circle
{
    width: 25%;
    float: left;
}

http://jsfiddle.net/yh988n5e/

Upvotes: 1

Related Questions