CODEWITHSUNDEEP
css
efpies
efpies

Reputation: 3725

Text and button different font size on same line

I have button and text on the same line. They have different font size. Button has padding. In browser it seems that text is on the same line, but the padding goes below the big text. I want the bottom button padding be on the same line as the big text. In other words, shift text a bit down or button a bit up.

enter image description here

Here's my CSS

.bigtext {
    font-size: 200%;
    border-bottom: 1px solid #999;
}

.button-container {
    display: inline-block;
}

.button-container button {
    font-size: 40%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
}

Fiddle: http://jsfiddle.net/7ydtgb7x/

Upvotes: 1

Views: 854

Answers (4)

Gerasimos Pap
Gerasimos Pap

Reputation: 459

If you want a really simple way to do this you can just add "position: relative;" and "bottom: 5px;" to your button.

If you need any help let me know by adding a comment. There are three kind of positions:

Relative which follows the flow.

Absolute that almost follows the flow.

And Fixed which gets completely out of any flow.

.bigtext {
    font-size: 200%;
    border-bottom: 1px solid #999;
}

.button-container {
    display: inline-block;
}

.button-container button {
    font-size: 40%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    position: relative;
    bottom: 5px;
}
<div class="bigtext">
    Test
    <div class="button-container">
        <button>Button</button>
    </div>
</div>

Upvotes: 2

nikola_wd
nikola_wd

Reputation: 607

Use either transform: translateY(-10px); or margin-bottom: 10px;

Upvotes: 0

dippas
dippas

Reputation: 60543

Here is a possible solution for you:

wrap your Test with a div, then both child's of .bigtext are (already) displayed inline-block, just make sure they are vertical-align:top.

Align vertical as well the button like this:

.button-container button { vertical-align:top}

Finally "reset" the line-height for your container .bigtext with: line-height:1

Here is a snippet with full code:

.bigtext {
  font-size: 200%;
  border-bottom: 1px solid #999;
  line-height: 1
}
.bigtext > div {
  display: inline-block;
  vertical-align: top;
}
.button-container button {
  font-size: 40%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  vertical-align: top
}
<div class="bigtext">
  <div class="text-container">Test</div>
  <div class="button-container">
    <button>Button</button>
  </div>
</div>

Upvotes: 1

maioman
maioman

Reputation: 18734

for a quick fix:

transform:translateY(-5px);

fiddle

Upvotes: 1

Related Questions