Question

我想在210px宽度div的中间放置一个100px x 100px的图像。请帮忙。 1EM = 10px的

#sidebox > .centered {
  text-align: center;
  margin-left: em;
  height: 10em;
  width: 10em;
  margin-top: 10em;
  position: absolute;
  background-position: center center;
  background-size: cover;
  border: 0.5em solid;
  border-radius: 100%;
  border-color: #2c3e50;
  background-image: url();
}

<div id="sidebox">
  <p>
    <div class="centered"></div>
  </p>

Answer 1

您可以将image <img> outer div的中心与以下属性对齐

margin:0 auto;或者这仅适用于对齐文字或图片text-align:center;

Answer 2

您可能需要将210xx宽度包装中的100x100px图像居中对齐您可以使用text-align:center;

居中对齐inline element

<强> HTML

<div id="sidebox">
    <img width="100px" height="100px" src="https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg"/>
</div>

<强> CSS

#sidebox{
    width: 210px;
    text-align:center;
    background: #eee;
}

JSFIDDLE DEMO

Answer 3

其他人提到的最重要的一点是，text-align:center必须应用于图片所在的框中，不图像本身。

您还有其他问题：

position:absolute会将有效图像宽度缩小为零 以进行居中 ，因此左边缘将居中。
< / LI>
您使用的<div>与<img>类似，但它不会像<img>那样居中，除非它的格式为display:inline-block。< / p>

之前＆amp;之后：

enter image description here

在：

    #sidebox { 
      font-size:10px;   /*ADDED so 1em=10px*/
      width: 210px;                 /*ADDED*/
      border: 2px dashed red;       /*ADDED*/ 
    }
    #sidebox > .centered {
      text-align: center;
      margin-left: em;
      height: 10em;
      width: 10em;
      margin-top: 10em;
      position: absolute;
      background-position: center center;
      background-size: cover;
      border: 0.5em solid;
      border-radius: 100%;
      border-color: #2c3e50;
      background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
    }

    <div id="sidebox">
      <p>
        <div class="centered"></div>
      </p>
      ***TEXT ADDED***
    </div>

后：

    #sidebox { 
      font-size:10px;   
      width: 210px;     
      border: 2px dashed red;
      text-align: center;       /*ADDED*/ 
    }
    #sidebox > .centered {
      display:inline-block;     /*ADDED*/
      /*text-align: center;     REMOVED*/
      margin-left: em;
      height: 10em;
      width: 10em;
      margin-top: 10em;
      /*position: absolute;     REMOVED*/
      background-position: center center;
      background-size: cover;
      border: 0.5em solid;
      border-radius: 100%;
      border-color: #2c3e50;
      background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
    }

将图像放在div的中间

3 个答案: