0

我正在为自己的网站使用引导程序，但我很难将单个 jpg 图像居中。

我使用以下代码

<header class="row-fluid">
<div class="span4 offset4">
<img src="img/yup.jpg" title="Hello" alt="World";>
</div>
<div class="title span12">
<h1>Hello Kitty</h1>
</div>          
</header>

但图像仍然没有居中......这里有什么问题？非常感谢！！

4

2 回答 2

1

或者将图像嵌入到一个 div 中，然后将该 div 居中。这是我的做法：

<form class="form-signin">
  <div id="auth-logo-container">
    <img src="http://www.fme.ma/wp-content/uploads/2012/02/logo.png">
  </div>
  <br>
  <br>
  <input type="text" class="input-block-level" placeholder="Votre login">
  <input type="password" class="input-block-level" placeholder="Votre mot de passe">
  <br>
  <br>
  <button class="btn btn-large btn-danger input-block-level" type="submit">Sign in</button>
</form>
<style type="text/css">
.form-signin {
  max-width: 300px;
  padding: 19px 29px 29px;
  margin: 50px auto 20px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#auth-logo-container{
  max-width: 247px;
  margin: 0 auto;
}
</style>
于 2013-10-04T14:55:33.757 回答
0

试试这个

<header>
   <div class="row-fluid">
       <div class="span5 offset2">
          <center><img src="img/yup.jpg" title="Hello" alt="World"></center>
       </div>
   </div>
   <div class="row-fluid"> 
       <div class="title span12">
          <h1>Hello Kitty</h1>
       </div>        
  </div>  
</header>

UPDATE : based on comment

当您使用 row-fluid 时，它将创建可以由名为 span1、span2...span12 的 12 个部分管理的行。偏移量应用为左侧边距。您可以根据您的要求应用它。它也分为12个部分。在这里，我使用了标签，因为您希望图像居中，因为默认情况下它是左对齐的。

于 2013-07-25T12:23:42.640 回答