Question

image-video-linkmas内的图片必须水平居中。我可以通过将text-align:center添加到div .article来实现此目的。然而，那里面的一切都是水平居中，我不想要。如何使图像居中并将其他所有内容保留原样？我试过了.article .image-video-linkmas img {text-align:center}但是没有用。

＆＃13;

<div class="article">
        <article class="item single_masonary_item active">
            <div class="masonary_item_inner">
                <div class="image-video-linkmas">
                    <a href="" target="_blank"><img alt=
                    "#" src="http://lorempixel.com/100/100"></a>
                </div>
            </div>
        </article>
    </div>

＆＃13;

Answer 1

您可以将图像置于中心位置：

img{
  display:block;
  margin: 0 auto;
}

示例：

http://codepen.io/nilestanner/pen/qaBjap

Answer 2

使用CSS实际上有很多方法可以解决这个问题，但这是我个人最喜欢的，我大部分时间用它来集中非文本内容。

是的，我猜有人已经回答了:)。我使用了内嵌样式。只需操纵宽度直到你想要的方式

＆＃13;

<div class="article">
        <article class="item single_masonary_item active">
            <div class="masonary_item_inner">
                <div style='width:10%; margin:0px auto;' class="image-video-linkmas">
                    <a href="" target="_blank"><img alt=
                    "#" src="http://lorempixel.com/100/100"></a>
                </div>
            </div>
        </article>
    </div>

＆＃13;

Answer 3

<强>更新

正如@raulbaros所说，他的立场是相对的。要解决这个问题，这应该是您的代码。

＆＃13;

img {
  margin-left: 250px; /*you can modify this to according*/
                      /*to your likes it will make the  */
                      /*image look centered despite the */
                      /*relative property being applied */
}

＆＃13;

<div class="article">
  <article class="item single_masonary_item active">
    <div class="masonary_item_inner">
      <div class="image-video-linkmas">
        <a href="" target="_blank">
          <img alt="#" src="http://lorempixel.com/100/100">
        </a>
      </div>
    </div>
  </article>
</div>

＆＃13;

更新前

为什么你不能放入你的CSS ...

＆＃13;

.image-video-linkmas {
  text-align: center;
}

＆＃13;

<div class="article">
  <article class="item single_masonary_item active">
    <div class="masonary_item_inner">
      <div class="image-video-linkmas">
        <a href="" target="_blank">
          <img alt="#" src="http://lorempixel.com/100/100">
        </a>
      </div>
    </div>
  </article>
</div>

＆＃13;

Answer 4

使用弹性框控制布局。这很容易。没有测试，因为我在地铁里输入这个答案。

<div class="article">
  <article class="item single_masonary_item active">
    <div class="masonary_item_inner">
      <div class="image-video-linkmas" style=" display: flex; justify-content: center"
        <a href="" target="_blank">
          <img alt="#" src="http://lorempixel.com/100/100">
        </a>
      </div>
    </div>
  </article>
</div>

如何在div中仅将一个div居中，并将其余部分保持原样

4 个答案: