Html 如何使用浮动将按钮居中：右_Html_Css

Html 如何使用浮动将按钮居中：右

html css

Html 如何使用浮动将按钮居中：右,html,css,Html,Css,我对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#

我对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>


abc分部{
填充物：5px2px8px5px；
边框：1px实心#dddddd；
边界半径：10px；
线高：120%；
边界顶部：无；
}
img#def{
保证金：1px 8px 2px 2px；
}
h1#ghi{
字号：18px；
颜色：#7fbdcb；
边际：0px；
字体：“Raleway”；
}
img#ggg{
字号：18px；
颜色：#7fbdcb；
保证金：4倍；
浮动：对；
背景颜色：蓝色；
}
.按钮{
背景色：#7fbdcb；
边界：无；
颜色：白色；
填充：6px 10px；
文本对齐：居中；
文字装饰：无；
字体大小：16px；
光标：指针；
浮动：对；
边缘顶部：12px；
保证金权利：4px；
左边距：0px；
}
.按钮：悬停{
背景色：#6ea5b1；
}
提交
提交你的电子邮件
陈词滥调的scenester-Wes-Anderson，Etsy副胡子。陈词滥调的scenester-Wes-Anderson，Etsy副胡子

您需要相应地调整

页边距顶部，这是一个错误

*{边距：0；填充：0；列表样式：无；框大小：边框框；}
.btn{填充：5px；文本装饰：无；边框：1px实心#ccc；颜色：#333；边距：5px；}
.立场，
.hack类型{边框：1px实心#999；边距：10px；填充：10px；}
.hack type.btn{float:右；边距顶端：22px；}

Lorem ipsum dolor sit amet，奉献精英。我们必须对所有人的行为和行为加以区别，并给予赞扬。化名为“尼莫·卡姆克，奎斯夸姆·尤斯托·劳姆”