Question

我正在使用bootstrap来构建我自己的网站。我的PAGE1分为3列。在第三列中，我想在中心放置一张图片，但只是水平放置。我想知道为什么＆＃34; margin-left：auto;＆＃34; ＆＃34; margin-right：auto;＆＃34;不做这个工作。请帮我把这张照片集中在一起。

这是相关代码：

HTML：

<div id="PAGE1" class="container-fluid">
        <div id="backgroundDiv1"></div>
        <div id="backgroundDiv2"></div>
        <div style="height:100%" class="row">
            <div id="reihe1"class="col-md-3"></div>
            <div id="reihe2" class="col-md-3"></div>
            <div id="reihe3"class="col-md-6">
                <div id="googleDiv" data-toggle="tooltip" data-placement="left" title="google+"><img id="googleplus" src="google+.png"></div>
                <div id="titel">
                    <p>*******</p>
                    <p>*******</p>
                    <p id="designer">*********</p>
                    <img src="pfeil.png" id="arrow">
                </div>
            </div>
        </div>
    </div>

CSS：

#PAGE1{
    overflow:hidden;
}
#backgroundDiv1{
    position: absolute;
    background-color:#848484;
    width: 1200px;
    height: 500px;
    z-index: 1;
    bottom:0;
    border-top-right-radius:700px;
    border-top-left-radius:200px;
    border-right: solid black 20px; 
}
#backgroundDiv2{
    position: absolute;
    background-color:#742B22;
    width: 800px;
    height: 400px;
    z-index: 2;
    bottom:0;
    border-top-right-radius:400px;
    border-top-left-radius:200px;
    border-right: solid black 20px;
}
#titel{
    position: relative;
    width:100%;
    height:100%;
    text-align:center;
    font-size:450%;
    color:#222222;
    padding-right: 50px;
    padding-top: 100px;
}
#designer{
    font-size: 0.6em!important;
    padding-left: 300px;
}
#arrow{
    margin-left: auto;
    margin-right: auto;
}

Answer 1

它不起作用，因为图像的宽度没有被声明。边距：auto仅在知道对象的宽度时才有效，可以通过width:Npx CSS标签，也可以是img标签，宽度属性。

Answer 2

将宽度应用于img或将图像包装在div中，并将text-align：center应用于div。

如何让这张照片始终保持在div的中心？

2 个答案: