How to center button with float:right

Question

I don't know much HTML and CSS but I was able to make a call out box. The gap between text and button has too much gap. And I want the button to be centered between the top and bottom border. I would appreciate if someone could help.

Check out the screenshot

Here's the code

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

score 0 · Answer 1 · answered Apr 08 '16 at 08:33

You either need to adjust the margin-top accordingly, which is a hack.

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

And using positioning, you can perfectly place it:

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

How to center button with float:right

1 Answers1