Div没有正确居中

时间:2016-09-05 21:18:23

标签: html css

我有3个div需要在网页中完全居中 这是预期的结果 expected result

但这是我能得到的结果 wrong result

这是我的HTML



* {
  padding: 0px;
  margin: 0px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}
body {
  text-align: center
}
#menu {
  background-color: #03a9f4;
  width: 100%;
  height: 70px;
}
#logo {
  margin-left: 100px;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 160px;
  height: 40px;
  float: left;
}
#right_side {
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 15px;
}
#profile_picture {
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
}
#arrow {
  margin-bottom: 15px;
  margin-top: 15px;
  margin-left: 7.5px;
}
#content {
  margin-top: 50px;
  display: inline-block;
}
.icon {
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#health_profile_title {
  float: left;
  font-size: 50px;
  color: white;
  font-weight: 300;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}
#short_ico {
  margin-left: 42.5px;
  margin-right: 42.5px;
}
#health_profile_ico {
  float: left;
}
.long {
  height: 180px;
  width: 450px;
  background-color: #0288d1;
  display: inline-block;
}
.short {
  height: 180px;
  width: 225px;
  background-color: #03a9f4;
  margin-left: 20px;
  display: inline-block;
}

<div id="content">
  <div class="long">
    <object class="icon" id="health_profile_ico" type="image/svg+xml" data="images/health_profile_icon.svg" width="140px" height="140px" alt="health profile"></object>
    <h2 id="health_profile_title">Health <br /> Profile</h2>
  </div>
  <div class="short">
    <object class="icon" id="short_ico" type="image/svg+xml" data="images/chat_icon.svg" width="140px" height="140px" alt="chat"></object>
  </div>
  <div class="short">
    <object class="icon" id="short_ico" type="image/svg+xml" data="images/nearby_place_icon.svg" width="140px" height="140px" alt="nearby locations finder"></object>
  </div>
</div>
&#13;
&#13;
&#13;         

请快速帮助我,因为我需要解决这个问题并完成项目 我使用photoshop生成了预期的结果,我很确定它们

1 个答案:

答案 0 :(得分:1)

问题似乎是#short_ico margin-right 属性的结果;所以在css中添加以下代码可以解决问题:

.short:nth-last-child(1) #short_ico {
    margin-right: 0;
}