CODEWITHSUNDEEP
csshtmllabel
user1802439
user1802439

Reputation: 2891

label positioning with css does not work

I have a label inside of a div. I want to position the label in the middle of the div and the text on the left side of the label, vertically aligned to center. How can I do this without padding and margin?

http://jsfiddle.net/E3Wb4/

<div class="center">    
    <label style="width:255px;height:40px;display:inline-block;float:center">Test</label>           
</div>


.center {
padding:0px;
background:#B3B3B3;
height:44px;
width:400px;
border-top:2px solid red;
border-bottom:2px solid red;
border-left:2px solid red;
border-right:2px solid red;
}

label{
    border-top:2px solid yellow;
    border-bottom:2px solid yellow;
    border-left:2px solid yellow;
    border-right:2px solid yellow;
}

Upvotes: 0

Views: 1379

Answers (3)

Avin Varghese
Avin Varghese

Reputation: 4370

THe best way is to add margin: 0px auto; to Label.

http://jsfiddle.net/WZ5MU/

you can also shotcode border by using border: 2px solid red;

border: <border-width> || <border-style> || <color>

Upvotes: 1

Панайот Толев
Панайот Толев

Reputation: 6607

.center{
  position: relative;
}
label{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

That's good way to center elements.

Upvotes: 0

Eli Ivanova
Eli Ivanova

Reputation: 83

you can set line-height: 44px for div.center

Upvotes: 1

Related Questions