Question

我正在尝试在图像内部的页面中心放置一个完全响应的文本框。我没有在图像上放置文本框时遇到任何问题，但出于某种原因，我无法将框放在中心位置。我已经尝试过审查并查看了多个教程和堆栈溢出答案但没有任何帮助。我尝试了两种宽度：50％和边距，但都没有奏效。下面是我的代码。我再次充分意识到这个问题有多个答案，但似乎都没有效果。非常感谢您的帮助，我们非常感谢！

＆＃13;

<html>
<head>
<style>

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}


</style>
</head>

<body>

<img src="orilliaback.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

</body>

</html>

＆＃13;

再次，非常感谢你！

Answer 1

将margin:0 auto添加到.square：

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
    margin: 0 auto;/*/<-------------Added/*/
}

完整代码：

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
    margin: 0 auto;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

Answer 2

只需使用flex-box;）

更多信息：link

＆＃13;

<html>
<head>
<style>

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;

   display:flex;
   justify-content: center;
   flex-direction: column
}


</style>
</head>

<body>

<img src="orilliaback.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

</body>

</html>

＆＃13;

如何在中心定位HTML边框

2 个答案: