Question

我是一名新手，我正在使用DRUPAL（CMS）来设计我的网站。我已经能够使用此标记来居中图像：

#block-imageblock-4{
    width:25.5%;
    height:10%;
    text-align:center;
    margin-top:1%;
    margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
}

因此，如果屏幕分辨率为1366px768px（最大#page）或更大，则＃block-imageblock-4将保留在页面中央。

在另一页上我有两张带两个标签的图片。我用这个CSS将它们并排放置。

#block-imageblock-17,#block-rotating-banner-1{
    display:block;
    width:auto;
    margin-left:2%;

}

有各自的标签：

#block-imageblock-17{
    width:15%;
    float:left;
    margin-top:1%;
    margin-left:3%;
    margin-right:1.5%;
    margin-bottom:5%;
}

#block-rotating-banner-1 {
    margin-right:-30%;
    margin-top:1%;
    margin-bottom:10%;
    float:left;
    background-repeat:no-repeat;
    width:26%;
    height:180px;
    max-width:100%;
    min-height:100%;
    background-image:url("/sites/default/files/imgs/ArtistFrame.png");
}

但是，如果屏幕分辨率大于1366像素×768像素，则图像不会居中。，这就是我的问题。

我注意到如果我从两个标签中取出所有浮点数和边距并将这两个元素放在这样：

#block-imageblock-17,#block-rotating-banner-1 {
    display:block;
    width:auto;
    text-align:center;
    margin-top:1%;
    margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
}

这两个图像是中心的，但不是彼此相邻。

有关将两张图片并排放置在页面中央的建议，例如标记#block-imageblock-4吗？

Answer 1

尝试将图片包装在<div>标记中，并使用margin: 0 auto;将div居中。像这样的东西

CSS

 .centerDiv { margin: 0 auto;}

HTML

<div class="centerDiv">
<img src="urlhere" />
...
</div>

Answer 2

试试这个：

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;   
}

以及更多：

http://www.paulund.co.uk/absolute-center-images-with-css

Answer 3

div
{
    margin: 0 auto;
    width: 100px;
}
img
{
    width: 100px;
}

带有“margin：0 auto;”的元素的宽度需要明确定义其宽度。见JSFiddle

CSS标签不会显示在页面中心

3 个答案: