Question

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;
}

长代码，但

我的目标是以frontimg.jpg为中心。

在这里，

<div id="home_container">

                <div id="home_content">

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

我尝试text-align: center到这里的所有div，但它不起作用：（

当然，如果我制作一个简单的div和img标签以及text-align。

在这种情况下，我找不到原因。

Answer 1

使用margin:0 auto; display:block;。这将使它成为中心。默认情况下，图片具有display:inline-block;特征。

Answer 2

将以下代码添加到您的CSS中。

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

Answer 3

更改

#home_frontimg{
    margin:0;
}

到

#home_frontimg{
    margin:0 auto;
}

DEMO here.

图像不会转到中心，使用text-align：center

3 个答案: