Şamandıralı düğme nasıl ortada: sağ

Çok HTML ve CSS bilmiyorum ama bir çağrı kutusu yapabildim. Metin ve düğme arasındaki boşluk çok fazla boşluk var. Ve düğmenin alt ve üst sınır arasında ortalanmasını istiyorum. Birisi yardım ederse memnun olurum.Şamandıralı düğme nasıl ortada: sağ

Kontrol dışarı ekran görüntüsü

İşte kod Ya kesmek hangi buna göre margin-top ayarlamak gerekir

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

kaynak

2016-04-08 user6176114

bu.

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

Ve position ing kullanarak mükemmel şekilde yerleştirebilirsiniz:

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

kaynak

2016-04-08 08:33:48

Şamandıralı düğme nasıl ortada: sağ

cevap

İlgili konular