我想要的標誌和在中心所有的屏幕大小標題

HTML代碼：我想要的標誌和在中心所有的屏幕大小標題

<div class="container-fluid"> 
     <header class="header-area row"> 
      <div class="container-fluid"> 
      <div class="logo-area row"> 
       <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5"> 
        <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a> 
       </div> 
      </div> 
      </div> 
      <div class="container-fluid"> 
      <div class="heading row"> 
       <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5"> 
        <h1>I love design </h1> 
       </div> 
      </div> 
      </div> 
     </header> 
    </div>

CSS代碼：

.header-area .logo-area img { 
    width: 90px; 
    height: auto; 
    margin: 52px 0 120px; 
} 
.img-responsive { 
    margin: 0 auto; 
}

我試過很多方法，但我失敗了。解決方案應該使用bootstrap完成，請幫助我。

來源

2015-08-08 Tanvir Rahman

你有圖像的列沒有居中...這似乎是一個奇怪的選擇。如果你只是把圖像放在行中（沒有列），它似乎使用通常的技術居中良好 - http://codepen.io/Paulie-D/pen/PqLNEV –

是的，這是奇怪的選擇。感謝您的建議。 ... –

嘗試添加1更多的類text-center到conrainer-fluid並刪除你在你的CSS應用的任何利潤

<div class="container-fluid text-center"> 
    <header class="header-area row"> 
     <div class="container-fluid"> 
     <div class="logo-area row"> 
      <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5"> 
       <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a> 
      </div> 
     </div> 
     </div> 
     <div class="container-fluid text-center"> 
     <div class="heading row"> 
      <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5"> 
       <h1>I love design </h1> 
      </div> 
     </div> 
     </div> 
    </header> 
</div>

來源

2015-08-08 08:56:19 alamnaryab

不能正常工作.... –

添加這種風格在你CSS文件：

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

，並添加上應用此班您的圖片：

<img class="img-responsive" src="images/logo.png" class=".center-block" alt="V" />

Demo

來源

2015-08-08 09:56:04 MHK

不能正常工作。像以前一樣的效果... –

這裏是一個解決方案，只需添加CSS display:inline-block，並把這個網站THG <center > </center>

這裏是修改後的代碼之間的所有代碼

.inline{ 
 
\t display: inline-block; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
} 
 
.header-area .logo-area img { 
 
    width: 90px; 
 
    height: auto; 
 
    margin: 52px 0 120px; 
 
} 
 
.img-responsive { 
 
    margin: 0 auto; 
 
}

<center> 
 
<div class="container-fluid"> 
 
     <header class="header-area row"> 
 
      <div class="container-fluid inline"> 
 
      <div class="logo-area row"> 
 
       <div class="col-xs-7 col-xs-offset-5 col-sm-7 col-sm-offset-5"> 
 
        <a href="index.html"><img class="img-responsive" src="images/logo.png" alt="V" /></a> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="container-fluid inline"> 
 
      <div class="heading row"> 
 
       <div class="col-xs-10 col-xs-offset-2 col-sm-9 col-sm-offset-3 col-md-7 col-md-offset-5"> 
 
        <h1>I love design </h1> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </header> 
 
    </div> 
 
    </center>`

祝你好運..

來源

2015-08-08 11:43:15 mim

'標籤已被廢棄......應使用其他居中方法。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center –

我想要的標誌和在中心所有的屏幕大小標題

回答

相關問題