昨天我發佈了一個問題,我該如何將div集中在div中...現在我有另一個問題,我想在屏幕上居中div。我希望它在中間,佔據屏幕的50%; 這是一個問題的照片: 由於其他div不能居中DIV
正如你所看到的,屏幕中間沒有任何東西,那是我的問題。這是我的HTML代碼:
* {
\t font-size: 100%;
\t font-family: Serif;
}
body {
\t background: url("images/background.jpg") repeat;
\t font-size: 100%;
}
.items {
\t background-color: rgba(0,0,0,.5);
\t width: 100%;
\t text-align: center;
\t margin: 0;
\t
}
#basicInfo{
\t background-color: rgba(255,150,0,.8);
\t width: 100px;
\t height: 100px;
\t display: inline-block;
\t margin-top: 10px;
\t margin-bottom: 10px;
}
#basicInfo:hover{
\t background-color: rgba(255,150,0,1);
}
#basicInfo img{
\t display: block;
\t margin-left: auto;
\t margin-right: auto;
\t padding-top: 16px;
}
#langs{
\t background-color: rgba(255,150,0,.8);
\t width: 100px;
\t height: 100px;
\t display: inline-block;
\t margin-top: 10px;
\t margin-bottom: 10px;
}
#langs img{
\t display: block;
\t margin-left: auto;
\t margin-right: auto;
\t padding-top: 16px;
}
#langs:hover{
\t background-color: rgba(255,150,0,1);
}
.navbar {
\t background-color: rgba(0,0,0,0.1);
\t position: fixed;
\t bottom: 0px;
\t left: 0px;
\t right: 0px;
\t width: 100%;
\t min-height: 5%;
}
.button{
\t background-color: rgba(0,0,0,.5);
\t font-size: 2em;
\t color: white;
\t width: 33%;
\t margin: 0 .16%;
\t height: 100%;
\t float: left;
}
.button:hover{
\t background-color: rgba(0,0,0,.7);
}
.button a{
\t text-decoration: none;
\t display: block;
\t color: white;
\t text-align: center;
\t vertical-align: middle;
}
#textSpace {
\t background-color: rgba(0,0,0, .5);
\t width: 100%;
\t height: 50%;
\t display: block;
\t top: auto;
\t bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
\t <div class="items">
\t \t <div id="basicInfo">
\t \t \t <img src="images/question.png">
\t \t </div>
\t \t <div id="langs">
\t \t \t <img src="images/code.jpg">
\t \t </div>
\t </div>
\t <div id="textSpace">
\t \t
\t </div>
\t \t <div class="navbar">
\t \t \t <div class="button">
\t \t \t \t <a href=""><b>Mateo</b></a>
\t \t \t </div>
\t \t \t <div class="button">
\t \t \t \t <a href=""><b>Home</b></a>
\t \t \t </div>
\t \t \t <div class="button">
\t \t \t \t <a href=""><b>Josh</b></a>
\t \t \t </div>
\t \t </div>
任何幫助apriciated!提前致謝!
你能澄清什麼是應該是在市中心? – indubitablee
將你可以使用的文本置於中心'text-align:center' –
你可以在這個[Fiddle](http://jsfiddle.net/2ffaycn6/)中顯示你想要的內容嗎? – Akshay