CODEWITHSUNDEEP
htmlcssresponsive-designpositioning
user3003810
user3003810

Reputation: 961

centering div position with responsive

I have a div with width 80%, and another with 20%. the first div has another div relative to it to be centered in the top middle, I tried to add left: 50; but not work 

<div class="content">
   <div class="circle"></div>
</div>

here is the example on JSFiddle

Upvotes: 0

Views: 65

Answers (4)

Weafs.py
Weafs.py

Reputation: 22992

You need to set left to calc(50% - 30px); which will center the .circle horizontally.

+----------------------+--------------------+
|     30px -------·    ·                    |
|                  \ o · o                  |
|                 o |  ·    o               |
|                o<--->·     o              |
|                o     ·     o              |
|                ·o    ·    o·              |
|                ·   o · o   ·              |
|                ·     ·     ·              |
|                ·<---60px-->·              |
|                ·     ·                    |
|<--50% - 30px-->·     ·                    |
|                      ·                    |
|                      ·                    |
|<---------50%-------->·                    |
|                      ·                    |
+----------------------+--------------------+

Fiddle

.circle {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -15px;
    left: calc(50% - 30px);
    right: 50%;
    background-color: #aaa;
    border-radius: 50%;
}

To center the .circle horizintally and vertically add top: calc(50% - 30px) to .circle.

Fiddle

.circle {
    width: 60px;
    height: 60px;
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    right: 50%;
    background-color: #aaa;
    border-radius: 50%;
}

Upvotes: 2

codingrose
codingrose

Reputation: 15699

Make .circle inline-block and give it proper margin.

.container {
    text-align:center;
}
.circle {
    margin:-15px auto 0 auto;
    display:inline-block;
}

See updated fiddle.

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

set negative margin-left to half the width of .circle

.circle {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left:-30px;
    right: 50%;
    background-color: #aaa;
    border-radius: 50%;
}

demo - http://jsfiddle.net/Lw3hh7th/3/

Upvotes: 1

John
John

Reputation: 916

Setting the second div to use relative positioning with "auto" for the left and right margins ought to work:

.circle {
    width: 60px;
    height: 60px;
    position: relative;
    top: -15px;
    margin: 0 auto;
    background-color: #aaa;
    border-radius: 50%;
}

JS Fiddle

Upvotes: 1

Related Questions