-2
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>pic</title>
  <link rel="stylesheet" href="/muvxky/pa1/style.css" />
</head>
<body><h1>pic</h1><div id="info_box" style="height: 20px"></div><hr><br><br><br>




<style type="text/css">

#wrapper_pic {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
  background-color: #EEE;
}

#header_pic {
    margin: 0 0 15px 0;
}

#left_pic {
    float: left;
    width: 150px;
    font-size: 70px;

}

#left_pic a{
    text-decoration: none;
    font-color: black;
}

#right_pic {
    float: right;
    width: 150px;
    font-size: 70px;
}

#right_pic a{
    text-decoration: none;
    font-color: black;
}


#middle_pic { 
    float: left;
    width: 730px;
}

#footer_pic {
    clear: both;
}

#middle_pic img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:650px;
}
</style>

<script>document.getElementById('info_box').innerHTML = 'info: No caption provided';</script>

<div id="wrapper_pic">
    <div id="header_pic">
        <b>Album:</b> 1 <a href='/album?id=1'> [ Go back to album ] </a><br>
        <b>Date Uploaded:</b> 2014-09-13<br>
    </div>
    <div id="container">
        <div id="left_pic">
            <a href='pic?id=xxxx'>&#8678;</a>       </div>
        <div id="middle_pic">
            <img class='center' src='http://www.welovesneakers.com/wp-content/uploads/2012/10/Air-Jordan-0.jpg'>
        </div>

        <div id="right_pic">
            <a href='pic?id=xxxxx'>&#8680;</a>      
        </div>
    </div>
    <div id="footer_pic"> </div>
</div>

<br><br><br><hr>Copyright</body></html>

JSBin of example: http://jsbin.com/sagesezukuvi/1/edit

I want the michael jordan picture to be centered. Ideally it will be centered no matter what screen size but I am having issues getting it centered on just 720p.

Edit:

Included code on page.

Not just the jordan picture should be centered but all images should be centered.

3
  • Your question isn't remotely clear, you've not even outlined the problem area and the question is totally dependent on your jsbin link. Please review the question guidelines and try agian. Sep 13, 2014 at 19:06
  • Can you provide some code with what you have tried so far?
    – user3968801
    Sep 13, 2014 at 19:14
  • He provided code (JSBin), and he wants to center the image. I don't see what's not clear about the question...
    – Darek Kay
    Sep 13, 2014 at 19:16

2 Answers 2

1

Rather than floating everything, use absolute positioning for your left and right links. You need the make the parent wrapper_pic have position relative too.

#left_pic {
    position:absolute;
    left:0;
    top:50px;
    width: 150px;
    font-size: 70px; 
}

#right_pic {
    position:absolute;
    right:0;
    top:50px;   
    width: 150px;
    font-size: 70px;
}

#wrapper_pic {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    background-color: #EEE;
    position:relative;
}

Then add padding to the middle container to give it space. Then the image can have auto margins with a max-width of 100%; this will constrain it to the size of the container.

#middle_pic { 
    padding:0 150px;
}

#middle_pic img {
   display:block;
   margin:0 auto;
   max-width:100%;
   height:auto; 
}

View here: http://jsbin.com/caqox/1/edit

0

Here you go: http://jsbin.com/tugadedocaxa/1/

Auto margin was the right thing to do, but you have to apply it to the div, not the image. Also, the center image should not have "float: left". And finally, the center div has to come last (after both arrow float divs).

1
  • It doesn't uncenter. Your arrow images have a lot of white space, so it appears not to be centered. Select the page content to see that (Ctrl + A)
    – Darek Kay
    Sep 13, 2014 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.