如何通过 css 使图像 .logo 居中？ [复制]答案

【问题标题】：How to center an image .logo via css? [duplicate]如何通过 css 使图像 .logo 居中？ [复制]
【发布时间】：2014-07-06 19:54:33
【问题描述】：

我在内容管理中制作了一个图像作为徽标，我尝试以多种方式使其居中，之前还替换了一些浮动。这是不可能的。

这是 exensivefree 主题中 style.css 的原始内容，我希望这是正确的地方：

header {
width:100%; 
margin:auto auto; 
z-index:101; 
padding:7px 0 12px 0; 
}

h1 {
display:inline-block; 
z-index:100;
}

.logo {
margin:25px 0px 10px 0;   
font-size: 24px; 
line-height:30px; 
font-weight: bold;
}

nav { }

【问题讨论】：

请提供一个 jsfiddle 或一些示例站点。
如果标志有 position:relative 你可以使用 margin:0 auto;
我尝试过 text-align:center 并且成功了。
margin:25px 0px 10px 0; -> margin: 25px auto 10px auto;

标签： css center graphical-logo impresspages

【解决方案1】：

你需要给元素一个固定的宽度并将边距设置为自动。

.logo {
  width:100px;
  margin: 0 auto;
}

这使得浏览器计算元素的左右边距相等，因此将其放置在页面的中心。

【讨论】：