Question

#border-search {
    position: relative;
    top: 50% !important;
    left: 25% !important;
    width: 100% !important; 
    margin-left: auto !important;
     margin-right: auto !important;
    display: none;
    }   
    #border-search.center img {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    width: 30%; 
    height: auto;
    }

我如何让它保持中心。香港专业教育学院尝试了许多不同的东西，但他们不工作。显示器无需停留，因为我需要它来显示隐藏图像。我还需要添加什么才能让他工作？我希望它只保持水平居中

这里是js小提琴

http://jsfiddle.net/matsuiny2004/zffvcvkk/

Answer 1

您可以尝试将当前#border-search内部img元素置于中心位置，并在CSS中进行以下更改，相对将图像置于自动（和相等）左侧 - 和右边距，并使其居中。

#border-search {
    margin: 0 auto;
    position: relative;
}

#border-search img {
    display: block;
    margin: 0 auto;
    position: relative;
}

您的图像需要display: block;语句才能被视为块元素，因此它可能会受到边距属性的影响。

检查demo JS Fiddle以验证我刚才所说的内容。：）

为什么图像随浏览器移动但不保持居中？

1 个答案: