blocks|key|783114|text|#doit+{
++++background:+url(url)+no-repeat+center;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|783115|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>#doit {
    background: url(url) no-repeat center;
}
</code></pre>


blocks|key|997451|text|使用背景位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997452|background-position:+50%25+50%25;|code-block|syntax|javascript|997453|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use background-position:</p>

<pre><code>background-position: 50% 50%;
</code></pre>


blocks|key|997597|text|对于居中或定位背景图像，您应该使用background-position属性。background-position属性从元素的top和left侧设置背景图像的起始位置。CSS语法是background-position+:+xvalue+yvalue;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|997598|"xvalue“和"yvalue”支持的值是长度单位，如px，百分比和方向名称，如left，right等。|997599|"xvalue“是背景的水平位置，从元素的顶部开始。这意味着如果你使用50px，它将是"50px“远离元素的顶部。"yvalue“是具有相同条件的垂直位置。|997600|因此，如果你使用background-position:+center;，你的背景图像将居中。|997601|但我总是使用下面的代码：|997602|​|997603|.yourclass+{
++background:+url(image.png)+no-repeat+center+/cover;
+}|code-block|syntax|javascript|997604|997605|我知道这很让人困惑，但这意味着：|997606|997607|.yourclass+{
++background-image:+url(image.png);
++background-position:+center;
++background-size:+cover;
++background-repeat:+no-repeat;
}|997608|997609|我也知道background-size是一个新的属性，在压缩代码中什么是/cover，但这些代码意味着fill背景的大小和在windows桌面背景中的定位。|997610|您可以在here中查看有关background-position的更多详细信息，在here中查看有关background-size的更多详细信息。|997611|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/cssref/pr_background-position.asp|1|https://www.w3schools.com/cssref/css3_pr_background-size.asp^0|H|J|1S|3|1W|4|2J|10|0|S|2|0|Z|4|0|8|S|0|0|0|0|0|0|0|0|0|4|F|10|6|1F|4|0|D|J|1E|F|4|4|0|15|4|1|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1X|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1Z|8|@]|D|@]|E|$S|T]]|$1|U|3|O|5|6|7|20|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|21|8|@]|D|@]|E|$]]|$1|X|3|O|5|6|7|22|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|R|7|23|8|@]|D|@]|E|$S|T]]|$1|10|3|O|5|6|7|24|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|25|8|@$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|13|3|14|5|6|7|2C|8|@$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]]|D|@$9|2H|A|2I|1|2J]|$9|2K|A|2L|1|2M]]|E|$]]|$1|15|3|-4|5|6|7|2N|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]|1D|$5|18|19|1A|E|$1B|1E]]]]

<p>For center or positioning the background image you should use <code>background-position</code> property .
The background-position property sets the starting position of a background image from <code>top</code> and <code>left</code> sides of the element .
The CSS Syntax is <code>background-position : xvalue yvalue;</code> .</p>

<p>"xvalue" and "yvalue" supported values are length units like <code>px</code> and percentage and direction names like left, right and etc .</p>

<p>The "xvalue" is the horizontal position of the background and starts from top of the element . It means if you use <code>50px</code> it will be "50px" away from top of the elements . And "yvalue" is the vertical position that has the same condition .</p>

<p>So if you use <code>background-position: center;</code> your background image will be centered .</p>

<p>But I always use this code :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.yourclass {
  background: url(image.png) no-repeat center /cover;
 }</code></pre>
</div>
</div>
</p>

<p>I know it is so confusing but it means :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}</code></pre>
</div>
</div>
</p>

<p>And I know that too the <code>background-size</code> is a new property and in the compressed code what is <code>/cover</code> but these codes means <code>fill</code> background sizing and positioning in windows desktop background .</p>

<p>You can see more details about <code>background-position</code> in <a href="https://www.w3schools.com/cssref/pr_background-position.asp" rel="noreferrer">here</a> and <code>background-size</code> in <a href="https://www.w3schools.com/cssref/css3_pr_background-size.asp" rel="noreferrer">here</a> .</p>


blocks|key|783187|text|如果背景图像是垂直对齐的精灵工作表，则可以将每个精灵水平居中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|783188|#doit+{
++++background-image:+url('images/pic.png');+
++++background-repeat:+none;
++++background-position:+50%25+[y+position+of+sprite];
}|code-block|syntax|javascript|783189|如果背景图像是水平对齐的精灵工作表，则可以将每个精灵垂直居中，如下所示：|783190|#doit+{
++++background-image:+url('images/pic.png');+
++++background-repeat:+none;
++++background-position:+[x+position+of+sprite]+50%25;
}|783191|如果您的精灵工作表是紧凑的，或者您不想在上述场景中将背景图像居中，则这些解决方案不适用。|783192|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If your background image is a vertically aligned sprite sheet, you can horizontally center each sprite like this:</p>

<pre><code>#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}
</code></pre>

<p>If your background image is a horizontally aligned sprite sheet, you can vertically center each sprite like this:</p>

<pre><code>#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}
</code></pre>

<p>If your sprite sheet is compact, or you are not trying to center your background image in one of the aforementioned scenarios, these solutions do not apply.</p>


blocks|key|783120|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|783121|#doit{
++++background-image:+url('images/pic.png');
++++background-repeat:+no-repeat;
++++background-position:+center;++
}++|code-block|syntax|javascript|783122|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me:</p>

<pre class="lang-css prettyprint-override"><code>#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  
</code></pre>


blocks|key|783205|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|783206|.network-connections-icon+{
++background-image:+url(url);
++background-size:+100%25;
++width:+56px;
++height:+56px;
++margin:+0+auto;
}|code-block|syntax|javascript|783207|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me: </p>

<pre><code>.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
</code></pre>


blocks|key|997628|text|这对我将图像对齐到div的中心是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997629|.yourclass+{
++background-image:+url(image.png);
++background-position:+center;
++background-size:+cover;
++background-repeat:+no-repeat;
}|code-block|syntax|javascript|997630|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me for aligning the image to center of div.</p>
<pre><code>.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</code></pre>


blocks|key|997470|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|997471|<style>
+++.WidgetBody
++++++++{+++
++++++++++++background:+#F0F0F0;
++++++++++++background-image:url('images/mini-loader.gif');
++++++++++++background-position:+50%25+50%25;++++++++++++
++++++++++++background-repeat:no-repeat;++++++++++++
++++++++}
</style>++++++++|code-block|syntax|javascript|997472|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me : </p>

<pre><code>&lt;style&gt;
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
&lt;/style&gt;        
</code></pre>


<p>Is it possible to center a background image in a div? I have tried just about everything - but no success:</p>

<pre><code>&lt;div id="doit"&gt;
  Lorem Ipsum ...
&lt;/div&gt;

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }
</code></pre>

<p>Is this possible?</p>


How to center a (background) image within a div?

可以在div中居中显示背景图像吗？我几乎什么都试过了--但没有成功：<div id="doit">  Lorem Ipsum ...</div>//CSS#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }这个是可能的吗？

问如何在div中居中显示(背景)图像？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中居中显示(背景)图像？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中居中显示(背景)图像？
EN