在 header 中居中 DIV

Question

所以我试图将徽标放在我的 wordpress 网站上 header 上面菜单的最顶部，在中间。我已将其设置为顶部但无法将其设置为水平居中。我试过 align:center、display:block、margin:0、auto 但所有这些行都被网站完全忽略了，我不确定为什么。

如何让 div 中的图像居中到 header 中的水平中心？这是一些我认为应该相关的代码，如果还有其他可能相关的内容请告诉我，我会 post 它。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 col-xs-3">
  <!-- Logo -->
  <div calss="logo-wrapper">
    <div class="logo">
      <a href="http://www.precom.com.pl">
        <div class="logo-wrapper" style="width:80px;left:30px;top:0px;">
          <img src="http://www.precom.com.pl/wp-content/uploads/2014/12/cropped-g3025.png" alt="Precom - Kominki i Wentylacje">
        </div>
      </a>
    </div>
  </div>
  <!-- Logo / End -->
</div>

Answer 1

您可以简单地使用： text-align: center;

你也可以使用这个：

.logo-wrapper {
   text-align: center;
}

这将使 div 居中。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 col-xs-3">
  <!-- Logo -->
  <div calss="logo-wrapper" style="background-color:#000;width:500px;">
    <div class="logo">
      <a href="http://www.precom.com.pl">
        <div class="logo-wrapper" style="text-align: center;">
          <img src="http://www.precom.com.pl/wp-content/uploads/2014/12/cropped-g3025.png" alt="Precom - Kominki i Wentylacje">
        </div>
      </a>
    </div>
  </div>
  <!-- Logo / End -->
</div>

Answer 2

您在 <div> 中指定了 top、left 等。请删除它们。相反，给他们一个margin: auto;。

<div class="logo-wrapper" style="width:80px; margin:auto;">
    <img src="http://www.precom.com.pl/wp-content/uploads/2014/12/cropped-g3025.png" alt="Precom - Kominki i Wentylacje">
</div>

Answer 3

你有一些 html 错误（div calss logo-wrapper ）...所以我重建你的 html

<div class="col-md-3 col-xs-3">
   <div class="logo">
     <div class="logo-wrapper" style="width: 160px; margin: 0 auto;"><a href="http://www.precom.com.pl"><img src="http://www.precom.com.pl/wp-content/uploads/2014/12/cropped-g3025.png" alt="Precom - Kominki i Wentylacje">  </a>
     </div>                           
   </div>  
</div>

Answer 4

确保您尝试居中的块具有以下内容：

.logo-wrapper{
position:relative;
display:block;
margin:0 auto;
float:none;
text-align:center;
    }

如果元素有绝对定位，它很可能会忽略边距。

在 header 中居中 DIV

Centering DIV in header

html

css

wordpress

jquery