CODEWITHSUNDEEP
htmlcsswebkit
user652649
user652649

Reputation:

How can i turn off automatic vertical alignment of <button>'s contents?

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>

Upvotes: 3

Views: 2596

Answers (5)

Zhao Xiaojing
Zhao Xiaojing

Reputation: 71

button {
  height: 100px;
  display: flex;
}

Upvotes: 0

Alohci
Alohci

Reputation: 82996

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/

Upvotes: 2

Ja͢ck
Ja͢ck

Reputation: 173622

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

Upvotes: 0

David Merinos
David Merinos

Reputation: 1295

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>

Upvotes: -1

stevelove
stevelove

Reputation: 3204

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>

Upvotes: 0

Related Questions