Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style a div like the button-element?

Tags:

html

css

button

I've noticed that when using the <button></button> element, the browsers will naturally assume that you want to center the inline content, and that the element is clickable. Is it possible to have a div behave in the same way through css? I went through the UA-stylesheet to see if I could figure it out, but nothing made it center it vertically.

The only other way i know to get the same result is with 2 divs. One wrapper with display: table, and a div with display: table-cell and vertical-align: middle.

But that creates an extra div. Is it possible to achieve the same behaviour with just one element?

Thanks.

like image 318
Malibur Avatar asked May 12 '14 11:05

Malibur


People also ask

How do you style a div element?

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!

Can you use a div instead of a button?

if <button>'s properties behaviors are enough for what you need then use button. if you require more designing, stick with divs. div's aren't necessarily wrong to be used as substitute for buttons. they are, afaik, more flexible and customizable.


1 Answers

http://jsfiddle.net/8Sj4A/3/ - this does center vertically and horizontally (just added text-align: center; to the originally answer)

div {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    max-width: 100px;
    padding: 5px;
    text-align: center;
}
div:active {
    color:red;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}
like image 142
Alex Avatar answered Sep 19 '22 05:09

Alex