Image Placement Issues

Question

I''m looking to move an image of a saw in between two borders so it is looks likes this.

I believe I have centered the image correctly but it appears I haven't and I am loathe to use padding if that is not right way, as I want this to be semantic as possible for a responsive design. I also need it to be placed within the two borders with one border stacked in front. Presumably I need use z-index to do that but I haven't got that far.

JsFiddle

Shailender Arora · Answer 1 · 2012-06-26T11:17:54.070

Hi Played with positioning and tried to make the results as per your referred image requirement. I hope this will help you.

CSS

    #logo-container .saw {
        left: 50%;
        margin: 0 auto;
        position: relative;
        top: 46px;
    }
#tag-container {
    border: 2px solid #00AC9D;
    height: 150px;
    margin-bottom: 5px;
    position: relative;
    width: 1140px;
}

see the demo:- http://jsfiddle.net/RJVXE/16/

Ahsan Rathod · Accepted Answer · 2012-06-26T11:22:16.110

1

Are you looking for something like this:

See Demo: http://jsfiddle.net/rathoreahsan/Fcn96/

edited Jun 26 '12 at 11:22

answered Jun 26 '12 at 11:10

Ahsan Rathod

5,465
2
21
25

Yes, looking for that format but withe saw image centered. I will be making the site responsive so it must stay centered as the browser size scales down. You positioning between the lines is perfect. – tobeeornot Jun 26 '12 at 11:16
Sorry, one more question - I didn't think it was advisable to use an empty div? – tobeeornot Jun 26 '12 at 12:41
The empty DIV is for lower border and higher `z-index` value from `.saw`, so you have to add it in your mark-up. – Ahsan Rathod Jun 26 '12 at 12:43

score 0 · Answer 3 · answered Jun 26 '12 at 11:06

You need to utilize both z-index and positioning.

.line
{
    height:1px;
    width:100%;
    background:#000;
    position:absolute;
    left:0px;
}
.item1
{
    top:5px; 
    z-index:5;
}
.item3
{
    top:25px; 
    z-index:15;
}


<div style="width:100%; position:relative">
    <div class="line item1"></div>
    <div style="position:absolute; top:0px;left:50px;z-index:10">
          <img src="saw.png" />
    </div>
    <div class="line item3"></div>
</div>

(example uses both inline & blocked CSS references only for brevity. Stay away from inline CSS).

score 0 · Answer 4 · edited May 23 '17 at 11:45

0

You could tryo what AlphaMale suggestes here: How to center image in a div horizontally and vertically

Before your image include a 'span' tag. Then add this properties to 'saw' class:

#logo-container .saw {
    text-align: center;
    margin-bottom:-50px!important;
}

The !important is to override margin: 0 auto that actually has.

http://jsfiddle.net/2EKWS/1/

edited May 23 '17 at 11:45

Community

1
1

answered Jun 26 '12 at 11:10

Alvaro

9,247
8
49
76

Image Placement Issues

4 Answers4