Question

所以我有这个首页，我试图让按钮朝向文本下方的中间对齐，但我尝试添加边距并且它不会移动。有小费吗？

Here is the photo

   .parallax {
      height: 100vh;
      width: 100%;
      background-color: #C4CBCA;
      background-attachment: scroll; /*fixed: image scrolls; scroll: image stays*/
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .create {
      background-color: #a4cdd1;
      color: white;
      min-width: 214px;
      border: none;
      height: 43px;
      display: inline-block;
      float: right;
      font: 700 15px Lato, arial, helvetica, sans-serif;
      text-transform: uppercase;
      text-align: center;
      align-items: center;
      padding: 13px 15px 10px;
      /*margin-left: 300px;*/
      /*margin-top: 10px;*/
      border: none;
      cursor: pointer;
    }
    
    
    #animated-example {
      font: 700 30px Lato, arial, helvetica, sans-serif;
      color: #5D5F71;
      float: right;
      margin-top: 200px;
      margin-right: 20px;
    }
    
    .animated {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    
    @keyframes lightSpeedIn {
      0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
      60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
      80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
      100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    }
    
    .lightSpeedIn {
      animation-name: lightSpeedIn;
      animation-timing-function: ease-out;
    }
    .animated.lightSpeedIn {
      animation-duration: 1s;
    }

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>front page</title>
        <link rel="stylesheet" href="front.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
      	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
      	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway">
      	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow">
      </head>
      <body>
        <div class="parallax">
          <div id="animated-example" class="animated lightSpeedIn">
            <p>SOME TEXT HERE</p>
          </div>
          <div class="photo">
          <img src="macmockup.png" style="width:675px; height:675px; margin-left:20px; margin-top:15px;">
          </div>
          <div class="create">
          <a href="#" class="button">Create Template</a>
          </div>
        </div>
      </body>
    </html>

Answer 1

所以，在这里杀死你的是浮动权，它会覆盖你之后添加的任何内容。

现在我不认为这是最好的解决方案，但如果你移除浮动，你可以添加你需要的任何余量来移动按钮。

要为你寻找的东西是引导程序，它是一种更清晰的方式来格式化很多这个http://getbootstrap.com/

Answer 2

尝试执行此操作从.create

中删除float：right

<div class="create_wrapper">
  <div class="create">
    <a href="#" class="button">Create Template</a>
  </div>
</div>

CSS
.create {
  background-color: #a4cdd1;
  color: white;
  min-width: 214px;
  border: none;
  height: 43px;
  display: inline-block;
  font: 700 15px Lato, arial, helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  align-items: center;
  padding: 13px 15px 10px;
  margin: auto;
  border: none;
  cursor: pointer;
}

.create_wrapper {
  width: 100%;
  text-align: center
}

Answer 3

如果您希望将.create放在中间，请尝试将.create{ text-align: center; }对齐。

List.where.not(id: Task.where('completed_at IS NULL').pluck('DISTINCT list_id'))

Answer 4

在你的风格上添加以下css：

.parallax {
    position: relative;
}
.create {
    position: absolute;
    bottom: 0;
    right:0;
}

实时查看http://codepen.io/sifulislam/pen/qaAjgY

使用CSS

4 个答案: