Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vertical position of an a-element and button-element

Tags:

html

css

position

I want to style a <button> and <a> element both into the same format. I use the following code:

button,
a {
  border: solid 1px black;
  background-color: white;
  color: black;
  font-family: 'Arial';
  padding: 0 15px;
  font-size: 13px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
}
#dummy-block {
  background-color: black;
  padding: 0;
  margin: 0;
  height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>

But the <button> element seems to ignore the height and my <a> element does not touch the edge of the black dummy <div> above:

enter image description here

You can test the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/

like image 410
Simon Avatar asked Nov 13 '14 11:11

Simon


People also ask

How do you align buttons vertically?

Other than flexbox property, we can also center align the button horizontally and vertically using a set of CSS properties. Add position: relative to the container class and position: absolute to the class containing the button. Now use left:50% and top:50% to position the button to the center of the container.

How do you set a button position?

Absolute Positioning You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top.

How do I make a vertical div in HTML?

To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line.

How do you center a div vertically and horizontally?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.


2 Answers

Try this:-

button, a {
    background-color: white;
    border: medium none;
    box-shadow: 0 0 1px #000 inset;
    color: black;
    display: inline-block;
    font-family: "Arial";
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    vertical-align: top;
}

Or:-

button, a {
    background-color: white;
    border: medium none;
    vertical-align:top;
    color: black;
    display: inline-block;
    font-family: "Arial";
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    border:1px solid #000;
    box-sizing:border-box
}

DEMO2

DEMO

like image 117
Mukul Kant Avatar answered Sep 21 '22 16:09

Mukul Kant


Apparently the default box-sizing method for button is border-box while that for inline-block is content-box. So:

  • 35px height means the <a> is actually 37px tall (border adds 2px)
  • 35px height means the <button> tag is 35px tall (35px includes the border)

Set the box-sizing: border-box on both elements.

button,
a {
  border: solid 1px black;
  background-color: white;
  color: black;
  font-family: 'Arial';
  padding: 0 15px;
  font-size: 13px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  box-sizing: border-box;
}
#dummy-block {
  background-color: black;
  padding: 0;
  margin: 0;
  height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
like image 41
Salman A Avatar answered Sep 22 '22 16:09

Salman A