ボタンをフロートで中央に配置する方法：右

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>

出典

2016-04-08 user6176114

だハックされており、それに応じてmargin-topを調整する必要があります。

* {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;}

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

そしてposition INGを使用して、あなたは完全にそれを置くことができます。

* {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%);}

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

出典

2016-04-08 08:33:48

ボタンをフロートで中央に配置する方法：右

答えて

関連する問題