Question

我不太了解HTML和CSS，但我能够拨打电话。文字和按钮之间的差距有太大的差距。我希望按钮在顶部和底部边框之间居中。如果有人可以提供帮助，我将不胜感激。

查看截图

这是代码

<html>
<head>
<style>
div#abc {
padding: 5px 2px 8px 5px;
border: 1px solid #dddddd;
border-radius: 10px;
line-height: 120%;
border-top:none;
}
img#def {
margin:1px 8px 2px 2px;
}
h1#ghi {
font-size:18px;
color:#7fbdcb;
margin:0px;
font-face:"Raleway";
}
img#ggg {
font-size:18px;
color:#7fbdcb;
margin:4px;
float:right;
background-color:blue;
}

.button {
    background-color: #7fbdcb;
    border: none;
    color: white;
    padding: 6px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    float: right;
    margin-top: 12px;
    margin-right: 4px;
    margin-left: 0px;
}

.button:hover {
    background-color: #6ea5b1;
}

</style>
</head>
<body>
<div id="abc"><img id="def" src="http://www.goodisle.com/wp-content/uploads/2014/03/raise-1.jpg" style="width:60px; height:60px; float:left;"><button class="button">Submit</button>

<h1 id="ghi">Submit your email</h1>
<p style="size:5px;">Cliche scenester Wes Anderson, Etsy Vice mustache.Cliche scenester Wes Anderson, Etsy Vice mustache.</p>
</div>

</body>
</html>

Answer 1

您需要相应地调整margin-top，这是一个黑客。

＆＃13;

* {margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
.btn {padding: 5px; text-decoration: none; border: 1px solid #ccc; color: #333; margin: 5px;}

.position,
.hack-type {border: 1px solid #999; margin: 10px; padding: 10px;}
.hack-type .btn {float: right; margin-top: 22px;}

＆＃13;

<div class="hack-type">
  <a href="#" class="btn">Hello</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut accusamus esse distinctio iusto omnis reiciendis numquam eaque sunt laudantium. Alias explicabo nihil consectetur qui nemo cumque, quisquam iusto laborum.</p>
</div>

＆＃13;

使用position ing，您可以完美地放置它：

＆＃13;

* {margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
.btn {padding: 5px; text-decoration: none; border: 1px solid #ccc; color: #333; margin: 5px;}

.position,
.hack-type {border: 1px solid #999; margin: 10px; padding: 10px;}
.hack-type .btn {float: right; margin-top: 22px;}

.position {position: relative; padding-right: 100px;}
.position .btn {position: absolute; right: 5px; top: 50%; transform: translate(0, -50%);}

＆＃13;

<div class="position">
  <a href="#" class="btn">Hello</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut accusamus esse distinctio iusto omnis reiciendis numquam eaque sunt laudantium. Alias explicabo nihil consectetur qui nemo cumque, quisquam iusto laborum.</p>
</div>

＆＃13;

如何用浮动中心按钮：向右

1 个答案: