Question

我有这个网站：

http://avocat.dac-proiect.ro/wp

我想在本网站中间发布一个徽标

我附上了一张图片，以了解他们想要发布的内容

http://i60.tinypic.com/2nuslzl.png

我如何发布这样的徽标？必须在header.php中创建一个单独的div并将其对齐在中间吗？

是否有任何小部件＆＃34;自定义HTML＆＃34;在哪些公共代码中解决这些问题？

我为Wordpress Twenty Fourteen改变了这个模板

提前致谢！

编辑：

<div id="logo-theme">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                             <img src="<?php echo get_template_directory_uri() . '/images/LOGO.png'; ?>" alt="<?php bloginfo( 'name' ); ?>" />
                        </a>
</div>

CODE CSS：

 #logo-theme
{
display:block;
margin-left:auto;
margin-right:auto;

}

Answer 1

一个简单的解决方案是为徽标提供一些CSS。

display:block;
margin:0 auto;

上面的CSS会将徽标图像带到中心您可以将上边距更改为任意数字，因为您希望它位于中间的某个位置。

Answer 2

所以HTML看起来像

<img src="path/to/image.jpg" alt="Image description" id="logo" />

然后CSS就是

#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

假设您知道要使用的图像大小，那么它非常简单。只需使用一些边距和定位。

首先，将图像显示为block，然后设置宽度。给它一个postion:relative;和top:50%。这是使其垂直居中的第一步。然后将边距设置为margin:-100px auto 0。 -100px完成垂直居中，auto使其居中水平。

＆＃13;

div {
  height: 300px;
  border: 1px solid black;
}
div img {
  display: block;
  width: 200px;
  position: relative;
  top: 50%;
  margin: -100px auto 0;
}

＆＃13;

<div>
  <img src="http://placehold.it/200" />
</div>

＆＃13;

Answer 4

您需要为使用margin添加元素宽度：0 auto;

#logo-theme {
margin: 10px auto 0px auto;
display: block;
width:220px; //Logo Width
}

在页面中间张贴徽标

4 个答案: