3

Is there a way to turn this feature off? Contents of <button> are always vertically centered, as opposed to what happens in a regular HTML tag.

Demo: http://jsfiddle.net/HbqnR/

I want <button> behave like <a>, with the text at the top left corner of the button.

I'm looking for a WebKit specific fix, maybe there is some -webkit-* css property that controls this behavior. Hacks are welcome but without using additional markup!

Thank you in advance :)

.button
{
    display:inline-block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:middle;
    padding:20px;
    box-sizing:border-box;
    text-decoration:none;
    width:200px;
    text-align:left;
}

<button class="button">&lt;button&gt;</button>
<a href="http://www.google.com" class="button">&lt;a&gt;</a>
  • i don't think we can turn off that – underscore Oct 24 '13 at 03:41
  • also same.We can try javascript – underscore Oct 24 '13 at 03:43
  • possible duplicate of [Button's text vertical align](http://stackoverflow.com/questions/15487408/buttons-text-vertical-align) – James Khoury Oct 24 '13 at 03:59
  • I think, to specifically answer your question, no - you cannot turn it off. No CSS rule can target the content of a button, other than to add content to it via `:before` and/or `:after`. You would have to target it via an additional element, as others here have shown, or via Javascript (which would just do the same). – Eamonn Oct 24 '13 at 04:22

5 Answers5

2

Add this:

button:before {
    content:'';
    display:block;
    margin-top:-50%;
}

See http://jsfiddle.net/r6yXw/

And, if you want it to only apply to webkit based browsers, wrap it in

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

see http://jsfiddle.net/r6yXw/1/

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

I see that you requested no additional markup, but if you decide to go down that route, one quick idea is to use positioning and one additional element.

button {
  position: relative;
}

button > span {
  position: absolute;
  top: 0;
}

<button><span>&lt;button&gt;</span></button>
stevelove
  • 3,194
  • 1
  • 23
  • 28
0

You can't. Not without introducing a <span> inside the <button> and use positioning:

<button class="button"><span>&lt;button&gt;</span></button>

Then add the following to .button:

.button
{
    /* ... */
    position:relative;
}

.button > span {
    position: absolute;
    top: 20px;
    left: 20px;
}

Demo

If you want to keep your HTML intact, you can modify the document using JavaScript as well:

$('button.button').wrapInner('<span>');

Note that if JavaScript is disabled, it won't work :)

Ja͢ck
  • 170,779
  • 38
  • 263
  • 309
0
button {
  height: 100px;
  display: flex;
}
Zhao Xiaojing
  • 71
  • 1
  • 4
-1

Check this out :P JSFIDDLE DEMO

   .button
{
    display:block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:top;
    padding:20px;
    box-sizing:border-box;
    width:200px;
    text-align:left;
    text-indent: 0;
    white-space: normal;
    word-spacing: 0px;
    letter-spacing: 0px;
    float: left;
    top:0;
}

It might work heh. I don't really know what do you need the button for. But this gets to see just like what you were asking before. Used it here.

<title>Documento sin título</title>
<body>
<form id="form1" name="form1" method="post" action="">
  <button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></button>
</form>
</body>
David Merinos
  • 1,195
  • 1
  • 14
  • 36
  • This is just adding a bunch of empty paragraphs to enforce the total size of text to grow and thus pulling the first line up. – PaulT Aug 18 '16 at 08:04