CODEWITHSUNDEEP
css
Display_name
Display_name

Reputation: 103

Centering img with CSS

Below is a simplification of my HTML code. I want to center img C within div A without taking element B into account. B has a background image with a width of 70px and C has a width of 300px. Width of div A is 50% of the screen.

<div id="A">
   <div id="B"></div><img id="C" src="x.png" />
</div>

I won't put my CSS code because at this point it seems as though I have tried every single possible combination of the display, margin, left properties. I'm stuck and getting frustrated. Help!

<div id="A">
    <div id="B" onclick="something()" ></div>
    <img id="C" src="x.png" />
</div>

#containsA {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: white;
}

#A {
    position: relative;
    top: 0px;
    width: 100%;
    height: 70px;
}

#B {
    position: relative;
    display: inline;
    background-image: url('some.png');
    height: 70px;
    width: 70px;
    top: 0px;
    float: left;
}

#B:hover {
    cursor: pointer;
    background-image: url('someOther.png');
    height: 70px;
    width: 70px;
}

#C {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
    width: 300px;
}

Upvotes: 1

Views: 247

Answers (4)

user1636522
user1636522

Reputation:

The following technique allows to center an element while ignoring other elements. This way however, the element is taken out of the normal flow of elements, so, the container ignores it :

#A {
    position: relative;
}
#C {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -150px;
}

Demo : http://jsfiddle.net/wared/p3XKW/.

Here is another suggestion. This time, I've chosen to take #B out of the flow in order to prevent the image from masking #B when the container is getting too small. Doing so, #B remains clickable but the container ignores its height. This might not be a problem if the height never varies :

#A {
    position: relative;
}
#B {
    position: absolute;
}
#C {
    display: block;
    margin: 0 auto;
}

Demo : http://jsfiddle.net/wared/dzgLR/.

Upvotes: 1

Nico O
Nico O

Reputation: 14102

Your HTML is invalid, there is one closing <div> too much. You could just use text-align:center on #A but that would affect #B also. So I'd go for this:

#A img
{
    display: block;
    margin: auto;
}

http://jsfiddle.net/j93sM/

Update:

you use this CSS:

#B {
    position: relative;
    display: inline;
    background-image: url('some.png');
    height: 70px;
    width: 70px;
    top: 0px;
    float: left;
}

That makes hardly sense. If you use float the elements become display: block; by default. As i still don't really understand what you want, i'am guessing you the <img> to be over #B. You can do this, whith this CSS:

 #A img
 {
     display: block;
     margin: -70px auto auto auto;
 }

Also Remove this from #C

position: absolute;
left: 50%;
transform: translateX(-50%);

Upvotes: 0

Ijas Ameenudeen
Ijas Ameenudeen

Reputation: 9259

I don't why there is this div#C, any way try this. Hope this is the solution you need.

HTML:

<div id="A">
    <div id="B"></div>
    <img id="C" src="http://lorempixel.com/300/300/" alt=""/>
</div>

CSS:

#A
{
    width:500px;
    height:500px;
    position:relative;
    border:3px solid red;
}

#B
{
    width:70px;
    height:70px;
    background:url(http://lorempixel.com/70/70/) no-repeat;
    border:3px solid blue;
    z-index:2;
}

#C
{
    z-index:1;
    border:3px solid green;
}

#B,#C
{
    display:block;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

Here is the DEMO

Please note, I have used borders only for demo purpose to separate the elements.

Hope this helps.

Upvotes: 0

thesublimeobject
thesublimeobject

Reputation: 1403

Your explanation is confusing, but based purely on abstract elements, this would work:

#a {
  position: relative;
}

#c {
  position: absolute;
  left: 50%;
  top: 50%;
  transform(-50%, -50%);
}

This doesn't take element #b into account at all, and will center #c within #a, but I really don't know if it's what you want. Make sure and use prefixes as always.

Upvotes: 0

Related Questions