0

html,

<div id="home_wrap">
            <div id="home_header">
                <div id="home_header_minitab">
                    <a class="modalbox" href="#login_frame" id="external_btn">Login</a>
                    <img src="topnavi_1.gif" /><img src="topnavi_2.gif" /><img src="topnavi_3.gif" /><img src="topnavi_4.gif" />

                </div>
                <!-- <div class="hr">
                <hr/>

                </div> -->
                <div id="line">

                </div>

                <div id="home_header_maintab">

                    <img id="home_navimenu_1" src="navimenu_1.gif" />
                    <img id="home_navimenu_2" src="navimenu_2.gif" />
                    <img id="home_navimenu_3" src="navimenu_3.gif" />

                </div>
            </div>
            <div id="home_container">

                <div id="home_content">

                    <img id="home_frontimg" src="frontimg.jpg" />
                </div>
            </div>
            <div id="home_sidebar">

                <img id="home_logo" src="logo.gif" />
                <div id="home_loginbox">

                    <img id="home_login_message" src="login_message.gif" />
                    <br/>
                    <input id="home_email_input" placeholder="       E-mail" />
                    <br/>
                    <input id="home_pw_input" placeholder="       PW"/>
                    <br/>
                    <img id="home_login_btn" src="home_login_btn.gif" />
                    <img id="home_pw_search_btn" src="home_pwsearch.gif" />
                </div>

            </div>

            <div id="home_footer">

                <div id="home_footer_bannerbar">
                    <img id="home_footer_banner_1" src="banner_1.png" /><img id="home_footer_banner_2" src="banner_2.jpg" /><img id="home_footer_banner_3" src="banner_3.png" />
                </div>
                <div id="home_footer_lastbar">
                    <div id="footer_line"></div>

                    <div id="home_footer_addressbar">
                        <img id="home_footer_bottomlogo" src="bottomlogo.gif" />
                        <img src="address.gif" />
                        <img id="home_footer_familysite" src="familysite.gif" />    
                    </div>

                </div>
            </div>
        </div>

css,

body{
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}

#home_wrap{
    width: 100%;
    margin: 0 auto;

}
#home_header{
    width: 100%;
    height: 110px;
    /*background:orange;*/
}
#home_container{
    background-image:url('main_bg.gif');
    width:100%;
    height:430px;
    /*background:green;*/
    float:;
}
#home_loginbox{
    width: 222px;
    height: 355px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#home_login_message{
    padding-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#home_logo{
    /*width: 222px;
    height: 155px;*/
    padding-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}



#line {
    background: #e6e6e6;
    width: 100%;
    height: 1px;
}
#footer_line{
    margin-bottom:40px;
    background: #e6e6e6;
    width: 100%;
    height: 1px;
}
#home_footer{
    width: 100%;
    height:auto;
    margin-top: 30px;
    /*background:yellow;*/
}
#home_footer_familysite{
    margin-left: 180px;
}
#home_footer_bottomlogo{
    margin-left: 20px;
}
#home_footer_banner_1{
    margin-left: 10px;
}
#home_footer_banner_2{
    margin-left: 80px;
}
#home_footer_banner_3{
    margin-left: 80px;
    height: 121px;
}
#home_footer_bannerbar{
    text-align: left;
    margin-bottom: 40px;
}
#home_sidebar{
    background-color:white;
    width:222px;
    height:510px;
    /*background:red;*/
    float:left;
    position:absolute;
    bottom:540px;
    left:20px;
    top:0px;
    border: 1px solid #bdbdbd;
}
#home_email_input{
    margin-left: 22px;
    margin-bottom: 10px;
    width: 176px;
    background: url(envelope.gif) no-repeat scroll 4px 3px;
}
#home_frontimg{
    text-align: center;
    display: table-cell;
    margin: 0;

}

#login_frame{
    width: 380px;
    height: 325px;
    background-image: url(loginbox_frame.gif)
}

#home_pw_input{
    margin-left: 22px;
    margin-bottom: 10px;
    width: 176px;
    background: url(lock.gif) no-repeat  5px -0.5px;
}
#home_header_minitab{
    width: 100%;
    float: right;
    text-align: right;
}
#line{
    margin-top:30px;
    float: right;
}
#home_header_maintab{
    margin-top:18px;
    width: 100%;
    float: right;

}
#home_login_btn{
    margin-left: 22px;
    margin-bottom: 10px;
}
#home_pw_search_btn{
    margin-left: 22px;
}
#home_navimenu_1{
    margin-left: 350px;
}
#home_navimenu_2{
    margin-left: 180px;
}
#home_navimenu_3{
    margin-left: 180px;
}


#home_content {
    background-color: transparent;
    width: auto;
    height: 430px;
    /*background-image: url('frontimg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;

    background-position: center;*/
    /*background: pink;*/
    padding-left: 243px;
    text-align: center;

    display: block;
}

Long code, but

My goal is to center the frontimg.jpg.

in here,

<div id="home_container">

                <div id="home_content">

                    <img id="home_frontimg" src="frontimg.jpg" />
                </div>
            </div>

and i tried text-align: center to all of the divs in here, but it doesn't work :(

Of course, it works if i make a simple div and img tag and text-align.

I can't find the reason why in this situation.

3 Answers 3

3

Use margin:0 auto; display:block;. This will make it to the center. As image by default has a display:inline-block; characteristic.

2
  • 1
    @Canna : you should accept an answer when its done the job for u!! ;)
    – NoobEditor
    Dec 4, 2013 at 11:31
  • @Mayank well thanks for the SUPER fast response. I have to wait 10 min for accept an answer :)
    – Canna
    Dec 4, 2013 at 11:54
0

Add the following code to your css.

img#home_frontimg{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
0

Change

#home_frontimg{
    margin:0;
}

to

#home_frontimg{
    margin:0 auto;
}

DEMO here.

1

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.