2015-01-15 104 views
-1

昨天我發佈了一個問題,我該如何將div集中在div中...現在我有另一個問題,我想在屏幕上居中div。我希望它在中間,佔據屏幕的50%; 這是一個問題的照片: enter image description here由於其他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!提前致謝!

+2

你能澄清什麼是應該是在市中心? – indubitablee

+0

將你可以使用的文本置於中心'text-align:center' –

+0

你可以在這個[Fiddle](http://jsfiddle.net/2ffaycn6/)中顯示你想要的內容嗎? – Akshay

回答

0

要水平在屏幕使用的中間居中一個div:

margin-left:auto; 
margin-right:auto; 
+3

或者如果沒有垂直邊距:'邊距:0自動' –

+0

沒有,不工作問題是,它甚至沒有顯示我的部門,你可以在照片上看到它。 –

+0

我假設它是與.item作爲導致問題的類的div?寬度爲100%時,它將佔據整個屏幕。如果你可以確認這是問題的div,並給予更多的細節,那麼我會加載代碼並看看它。 – MKC