使用CSS对齐图像，按钮和动画文本
[英]Aligning image, button, and animated text using CSS
问题描述
So I have this front page and I'm trying to have the button align towards the middle like below the text, but I've tried adding margins and it won't move. 
所以我有这个首页，我试图让按钮对齐中间，就像在文本下方，但我尝试添加边距，它不会移动。 Any tips? 有小费吗？
.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>
4 个解决方案
解决方案1
0 已采纳 2016-09-24 06:27:52
So whats killing you here is the float right it is overriding anything you add after that. 所以在这里杀死你的最重要的是，它会覆盖你之后添加的任何内容。
Now i don't think this is the best solution but if you remove the float you can then add whatever margin left you need to get the button to move. 现在我不认为这是最好的解决方案，但如果你移除浮动，你可以添加你需要的任何边距，让按钮移动。
something to look into for you would be bootstrap, it is a much cleaner way to format a lot of this http://getbootstrap.com/ 为你调查的东西就是bootstrap，它是一种更清晰的方式来格式化这个http://getbootstrap.com/
解决方案2
0 2016-09-24 06:30:35
Try to do this Remove float: right from .create 尝试这样做。从.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
}
解决方案3
0 2016-09-24 06:45:44
如果你想在中间对齐，请尝试将.create对齐到中心。
.create{ text-align: center; }
解决方案4
0 2016-09-24 07:21:01
add following css on your style: 在你的风格上添加以下css：
.parallax {
position: relative;
}
.create {
position: absolute;
bottom: 0;
right:0;
}
check live http://codepen.io/sifulislam/pen/qaAjgY 现场检查http://codepen.io/sifulislam/pen/qaAjgY
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.