how to make CSS contrl image centering?

  • Please see: https://sprangleblog.com/

    Note that the image is off to the left. I’ve tried a lot of variations in the CC but can’t make it center.

    Here’s the relevant portion of the index.php

    <div id=”headerblock”>
    <img class=”img.center” src=”https://sprangleblog.com/images/TajMahal.jpg”/&gt;
    </div> <!– headerblock –>

    and here are all the (I think) relevant CSS

    img.right {
    padding: 5px;
    margin: 0 0 2px 7px;
    display: inline;
    float: right;

    }

    img.left {
    padding: 5px;
    margin: 0 7px 2px 0;
    display: inline;
    float: left;

    }

    img.center {
    padding: 5px;
    background: transparent;
    border: 1px solid #00000;
    float: center;

    }

    Advice greatly appreciated

Viewing 7 replies - 1 through 7 (of 7 total)

  • Make

    img.center {
    padding: 5px;
    background: transparent;
    border: 1px solid #00000;
    float: center;
    }

    this:

    img.center {
    padding: 5px;
    background: transparent;
    border: 1px solid #00000;
    margin:0 auto;
    text-align:center;
    }

    float:center accomplishes nothing…. might even be deprecated, not sure.

    Thread Starter joehark

    (@joehark)

    Thanks for the response, but that didn’t do the job. You’ll note nothing has changed after I substituted your code and uploaded the revised style sheet.

    May I send you access to the server in a private message?

    Or perhaps another suggestion?

    TIA

    Your class usage in the HTML is incorrect. Instead of <img class="img.center" you should be using <img class="center"

    Hi Joe –

    Try this, change the following sections as noted below:

    body {
    color: #000000;
    background: #efefe7;
    margin: 20px;
    padding: 0px;
    font: 11px verdana, arial, helvetica, sans-serif;
    text-align:center;
    }

    /* All the content boxes belong to the content class. */
    .centreblock, .navigation {
    position: relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width: auto;
    min-width: 120px;
    margin: 0px 210px 20px 190px;
    border: 1px solid #000;
    color: #222;
    background: #eee;
    padding: 10px;
    z-index: 3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    text-align:left;
    }

    #rightside {
    position: absolute;
    width: 190px;
    top: 20px;
    right: 20px;
    padding: 5px;
    text-align:left;
    }

    #leftside {
    position: absolute;
    width: 168px;
    top: 20px;
    left: 20px;
    padding: 5px;
    text-align:left;
    }

    See if that helps.

    Great question, with great responses. Thank you ‘too’ for helping me on this hang-up.

    Well, I HOPE it helps! If you’ve other problems, post back, might want to start your own thread….

    Thread Starter joehark

    (@joehark)

    Hi vkaryl,

    Thanks for the response but something is holding me back.

    I’m not sure how to implement your advice. Are you telling me to replace each of the CSS blocks with one of the same name from your message, or just pop the whole thing in there, or . . . I’m confused.

    While confusion is an all too familar condition that I’ve learned to live with, it’s been my sad experience that impetuous actions I take while ignoring that confusion usually are followed by disaster – and I don’t handle that well at all. You don’t wanna see me cry. It’s not good.

    So please clarify for me which text goes where? Don’t be afraid to talk down to me and spell things out in childlike detail. I have no pride. Or shame.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘how to make CSS contrl image centering?’ is closed to new replies.