- Вертикално подравняване на div елемент
WT форуми -> HTML / Javascript / CSS -> Вертикално подравняване на div елемент
Създайте нова тема Напишете отговор 
Автор Съобщение
Stanski82
Нов
Нов

Регистриран на: 08/12/2017 6:38 pm

Support: 0
Bonus: 0
Мнения: 2
Мнение 08/12/2017 6:57 pm     Вертикално подравняване на div елемент Отговорете с цитат


Здравейте. Възникна проблем при опит да центрирам вертикално едно див-че. Ето го случаят:
<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!
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
heytar
Нов
Нов

Регистриран на: 29/06/2015 9:28 am

Support: 1
Bonus: 2
Мнения: 71
Мнение 09/12/2017 12:18 pm      Отговорете с цитат


https://jsfiddle.net/kccdcmym/1/
?
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Stanski82
Нов
Нов

Регистриран на: 08/12/2017 6:38 pm

Support: 0
Bonus: 0
Мнения: 2
Мнение 10/12/2017 8:31 am      Отговорете с цитат


heytar написа:
https://jsfiddle.net/kccdcmym/1/
?


На Localhost ми излиза лепнато в бокса горе, вляво. Когато го отворя само с браузъра няма никакъв проблем, наистина. Не зная защо се получава така.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети