css 如何居中图像[复制]

xe55xuns 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(130)

- 此问题在此处已有答案**：

（133个答案）
Center image using text-align center?（28个答案）
昨天关门了。
我想使用flexbox来居中图片。我可以不用把图片放到另一个div中来做吗？
我想我尝试了所有的flexbox选项，但不确定，这就是为什么我问。
下面是一些HTML和CSS代码。

body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

Img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

css

来源：https://stackoverflow.com/questions/75283162/how-to-center-image

3条答案

按热度按时间

z9ju0rcb1#

将图像转移到具有display: block的块级元素。块级元素可以以margin: 0 auto为中心：

body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

Img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
  display: block;
  margin: 0 auto;
}

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

赞(0）回复(0）举报 2023-02-01

toe950272#

是的，你可以。你可以在图像上使用margin: 0 auto属性，它会起作用。

body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

img.MainIMG {
  max-height: 50vh;
  /* Make an image height 100% of parent div */
  max-width: 50vw;
  /* Make an image width 100% of parent div */
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0 auto; /*add this*/
}

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

赞(0）回复(0）举报 2023-02-01

xhv8bpkk3#

请更改图像的display:inherit样式。请添加以下样式。

img.MainIMG {
 max-height: 50vh;
  /* Make an image height 100% of parent div */
  max-width: 50vw;
  /* Make an image width 100% of parent div */
  display: inherit;
  margin-left: auto;
  margin-right: auto;
  }

赞(0）回复(0）举报 2023-02-01

我来回答

css 如何居中图像[复制]

3条答案

相关问题

热门标签

最新问答