Question

所以我试图在我的wordpress网站上面的菜单中间标题的顶部放置徽标。我已将其设置为顶部但无法将其设置为水平居中。我已尝试对齐：中心，显示：块，边距：0，自动但所有这些线都被网站完全忽略，我不知道为什么。

如何将div中的图像居中置于标题中心？以下是一些我认为应该相关的代码，如果还有其他可能相关的请告诉我，我会发布它。

＆＃13;

<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>

＆＃13;

Answer 1

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

您也可以使用：

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

这将使div居中。

＆＃13;

<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>

＆＃13;

Answer 2

您已在top中指定了left，<div>等。请删除它们。相反，为他们提供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;
    }

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

在标题中居中DIV

4 个答案: