Whay do my divs move down on the page when there they have text in them and how can I fix this?
user3062323
I have noticed that when I have text in my inline-block divs they move down instead of staying in place how can I fix this so that is stays in line with the others with text inside?
Screenshot
HTML
<html>
<head>
<title>My Web site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="home.css">
</head>
<body>
<div id="container">
<div id="jumbotron">
</div>
<center>
<div class="listbox">
<h1>exapmle</h1>
</div>
<div class="listbox">
</div>
<div class="listbox"></div>
</center>
<!-- container end div -->
</div>
</body>
</html>
CSS
#container{
height:100%;
width:100%;
background-color: #669999;
padding: 5px 5px 5px 5px;
}
.listbox{
height: 250px;
width: 250px;
background-color: #003333;
display:inline-block;
border-radius:5px;
}
#jumbotron{
margin:2px auto 5px auto;
background-color:black;
border-radius:5px;
height:450px;
width:900px;
color:#ffffff;
}
Harsh Moorjani
It's happening, because browser is trying match the baseline of all inline elements.
Add vertical-align: middle to .listbox
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
When, exactly, do floated divs move down?
- 2
How do I See if All of My Divs Have Class?
- 3
How can I have multiple accordion drop down menus in my website. HTML, CSS JavaScript
- 4
Do I have multiple python on my computer? and how to uninstall one of them?
- 5
How do I fix Unity from freezing and artifacts on my screen when I'm charging my laptop?
- 6
How can I fix my Boot problem?
- 7
Two divs side by side: how can i make the div that is on the left side go down when it breaks for responsive layout?
- 8
How can I move text to the left with CSS?
- 9
How can I find files and then use xargs to move them?
- 10
How do I move the selection down one row in Excel 2007?
- 11
My Paint method is running twice and I have no idea why. How can I fix this, and does anyone know why this is happening?
- 12
How do I get information from the logs on my computer when I only have access to the command line?
- 13
how can i search for values that have "-" dash in them with elastic search
- 14
how do i write certain commands and call them into a page in php
- 15
How can I change the way my computer shuts down
- 16
How can I reference my UserControls to display them on the Settings pane?
- 17
How can I work on files on my server and keep them in sync?
- 18
How can I work on files on my server and keep them in sync?
- 19
How do i convert my values in an array/object to measure them?
- 20
How can I wire up a button on my page so that it is clicked when a user presses enter?
- 21
How do I move my Yeoman Angular app to a repository?
- 22
How do I move my encrypted /home to a new computer?
- 23
How can I fix my Debian's /etc/network/interfaces?
- 24
Why is JavaCC not working on my mac and how can I fix it?
- 25
How can I fix my desktop background setting?
- 26
How do I fix my prompt in emacs shell-mode?
- 27
How do i fix my windows boot loader?
- 28
How can I fix this error on fetching text from pastebin?
- 29
How do I fix a "Can't access Dropbox folder" error?
몇 마디 만하겠습니다