Здравейте. Възникна проблем при опит да центрирам вертикално едно див-че. Ето го случаят:
<div id="wrapper">
<div class="box">
<div id="calc">
<input class="screen" />
<div class="first_row">
<button>%</button>
<button>*</button>
<button>/</button>
<button>C</button>
</div>
Това е html-a в частта, която ме интересува. Ето го и целият CSS:
#wrapper, body {
width: 100%;
height: 100%;
background-color: green;
}
.box{
width: 300px;
height: 450px;
background-color: white;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 10%;
}
#calc{
width: 90%;
height: 90%;
border: solid red 3px;
margin-top: 10%;
margin-bottom: 10%;
margin: 0 auto;
}
.screen{
width: 90%;
height: 40px;
margin-left: 10px;
margin-top: 15px;
}
.first_row{
float: left;
}
button{
float: left;
margin-left: 10px;
margin-top: 15px;
width: 54px;
height: 50px;
}
.null{
width: 118px;
height: 50px;
}
Въпреки, че съм и на #calc margin auto и по 10% отгоре и отдолу, както съм го направил в .box рамката ми е лепната за горната част на бокса. Моля за идеи как да центрирам #calc в .box!
