html - 无法在 css 中将我的图像居中并且无法删除水平滚动条

Question

我试图将 .front 置于页面的中心，但似乎无法做到这一点。还有一个水平滚动条，我不知道为什么或如何摆脱它。当我尝试 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{
  display:block;
  width:50%;
  margin:0 auto;  
}

对于你的滚动条，不看代码是很难的，但如果你添加一个 overflow:hidden 到你的包装元素，它应该可以解决问题