2016-05-16 116 views
1

這裏是我的代碼我想在div class="col-md-6 col-md-offset-3">內部的一切因爲某些原因,當我嘗試引導text-center類完全居中時,它不是正確居中。需要文本對齊內部引導

這是我的index.html代碼。另外我使用Bootstrap和Google字體。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
 
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    <body> 
 
    <div class="bg1"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <img class="lgsize" src="logo.gif" alt="Logo"> 
 
     </div> 
 
     <div class="col-md-6"> 
 

 

 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="pushdown"> 
 
      <div class="col-md-6 col-md-offset-3"> 
 
      <span class="text-center title">Proto X Media</span> 
 
      <p class="text-center subtext">Professional Media Production & Hardware Consultation.</p> 
 
     </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
    </html>

和這裏是我做了我的style.css文件。

.title { 
 
    font-family: 'Bree Serif', serif; 
 
    font-weight: 800; 
 
    font-size: 500%; 
 
    color: 373d44#; 
 
    text-align: center; 
 
} 
 
.bg1 { 
 
    background-image: url("bg2.jpg"); 
 
    background-size: cover; 
 
} 
 
.lgsize { 
 
    width: 150px; 
 
    height: 140px; 
 
} 
 
.pushdown { 
 
    padding-top: 150px; 
 
    padding-bottom: 250px; 
 
} 
 
.menu { 
 
    font-size: 100% 
 
    font-family: 'Bree Serif', serif; 
 
} 
 
a { 
 
    color:inherit; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    background-color: transparent; 
 
    text-decoration: none; 
 
} 
 
.subtext { 
 
    text-align: center; 
 
    font-family: 'Bree Serif', serif; 
 
    font-size: 16px; 
 
}

謝謝你們非常:)!

+0

嘗試text-align:center!important; –

+0

.container {text-align:center} –

回答

1

元素對齊必須

display: block /*(or inline-block)*/ 

而且,把

text-align:center 

父DIV和兒童刪除。

+0

非常感謝您的幫助。 –