Question

尝试使用Squarespace网站帮助我的朋友并尝试在标题代码中添加图片。

我尝试过集中调整，但似乎没有用。只有填充和边距像素有任何效果，但在使用不同尺寸的显示器时它不一致。

非常感谢任何帮助！

以下当前代码：

<a href="https://wwwmisscurrentcom.squarespace.com/about-1/"><img class=
"thumb-image loaded" data-image-dimensions="960x41" data-image-resolution=
"1500w" data-src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
id="yui_3_17_2_1_1407515470914_1223" src=
"https://static.squarespace.com/static/53ce81e3e4b065e3be155770/53cfbd0ce4b056db8c5d3b42/53e4fdb9e4b036cda0551713/1407516127095/header-shipping.png?format=1000w"
style="top: 114px; position: relative;margin-left: 150px;"></a>

Answer 1

几次重读你的问题后，我想我知道你在问什么。您可以使用margin: 0 auto;对图像居中。 auto左右边距将在所有分辨率和屏幕尺寸上水平保持块元素（在本例中为div）死点。

Have a jsBin example!

HTML

<div class="header">
    <img src="http://www.placehold.it/200x100" alt="logo" />
</div>

CSS

.header {
    width: 200px;
    margin: 0 auto; 
    /* 
        shorthand margin = 
        top (0)
        right (auto) 
        bottom (0 - inherited from top) 
        left (auto - inherited from right); 
    */
}

Answer 2

如果您希望它正确居中，则必须访问自定义css并使用媒体查询。 SquareSpace中标准像素和百分比的问题在于您可能将其置于显示器的中心位置，但它并不总是以其他硬件/设备为中心。

无法使中心在多个监视器上一致地对齐图像

2 个答案: