Question

我正试图在页面上居中。但似乎无法这样做。还有一个水平滚动条，我不知道为什么或如何摆脱它。当我尝试overflow-x：hidden; .front被切断，垂直滚动缩短。

这是css

body{
font-family: 'Proza Libre', sans-serif;
background-color:#f7f3de;
}
.para{
text-align:left;
position:relative;
display:inline;
right:-100px;
}
.links{
text-align:center;
width:100%;
position:relative;
display:inline-block;
font-size:20px;
top:-50px;
word-spacing:30px;
}
.logo{
position:relative;
display:box;
float:right;
width:16%;
top:-100px;
right:100px;

}
.front{
position:relative;
top:100px;
display:box;
float:center;   
}

这是html

    <div class="para">
    <h1>Beach Corp Inc.</h1>
    </div>
        <div class="links">
        <a href="asdasd.com">FAQ</a>
        <a href="asdasd.com">About</a>
        <a href="asdasd.com">Social</a>
       <a href="asdasd.com">Contact</a>
    </div>
    <div>
    <img src="http://samuibeautifulbeachvillas.com/assets/samui-beautiful-
beach-villas.png" class="logo">
    </div>
    <div>
    <img src="http://www.beaches.com/assets/img/home/rst-btc.jpg" class="front">
    </div>

body {
  font-family: 'Proza Libre', sans-serif;
  background-color: #f7f3de;
}

.para {
  text-align: left;
  position: relative;
  display: inline;
  right: -100px;
}

.links {
  text-align: center;
  width: 100%;
  position: relative;
  display: inline-block;
  font-size: 20px;
  top: -50px;
  word-spacing: 30px;
}

.logo {
  position: relative;
  display: box;
  float: right;
  width: 16%;
  top: -100px;
  right: 100px;
}

.front {
  position: relative;
  top: 100px;
  display: box;
  float: center;
}

<div class="para">
  <h1>Beach Corp Inc.</h1>
</div>
<div class="links">
  <a href="asdasd.com">FAQ</a>
  <a href="asdasd.com">About</a>
  <a href="asdasd.com">Social</a>
  <a href="asdasd.com">Contact</a>
</div>
<div>
  <img src="http://samuibeautifulbeachvillas.com/assets/samui-beautiful-
beach-villas.png" class="logo">
</div>
<div>
  <img src="http://www.beaches.com/assets/img/home/rst-btc.jpg" class="front">
</div>

Answer 1

这将使您的div front居中。

.front{
  display:block;
  width:50%;
  margin:0 auto;  
}

对于你的滚动条，如果你没有看到代码就很难，但是如果你在你的包装元素中添加overflow:hidden它应该解决问题

Answer 2

使用此隐藏水平滚动条：

degree-of-polyphony

这是中心图像：

    body{
        overflow-x: hidden;
    }

Answer 3

您可以使用overflow-x: hidden;隐藏水平滚动条，并使用margin:auto;

设置居中

无法将图像置于css中心，无法删除水平滚动条

3 个答案: