当我的视口宽度小于 1235 像素时如何将我的照片居中？

Question

我正在创建我的网站，并在 CSS 上使用@media 标签使其适合移动设备。当视口小于 1235 像素时，我有一张帝国大厦的图像，它向右对齐而不是居中。我想知道这个问题的根源是什么？我尝试使用 @media 标签将图像与 "text-align: center;" 居中，但没有成功。

It currently looks like this

我要居中的目标图片叫做"NYC_icon"

这是我的HTML：

<div class="section1">

     <div id="NYC_icon">
         <img src="C:\Users\LYind\OneDrive\Documents\Full-Stack Developer 2020 Course\Personal Website HTML\Images\home2.png"
             alt="NYC">
     </div>

     <div id="Mini_Bio">
         <h1>
             Linda Ye
         </h1>
         <h2>
             <i>NYC
             </i>
         </h2>
         <p>
             Aspiring <strong> coder</strong>, business
             <strong> woman</strong>, avid
             <strong> runner</strong>, and weekend
             <strong> chef</strong>.
         </p>
     </div>
 </div>

这是我的CSS：

.section1 {
margin: 80px;
padding: 30px 20px;}

#NYC_icon {
display: inline-block;
margin-left: 200px;
vertical-align: top;}

@media (max-width:1278px) {
#NYC_icon img{
    text-align: center;}}

Answer 1

您可以尝试将 text-align: center 应用于包含图像的 div。当屏幕宽度小于 1235px 时，还要指定 margrin: 0。所以它允许图像可以水平居中。

@media (max-width:1235px) {
  #NYC_icon {
    display: block;
    margin: 0;
    text-align: center;
  }
}

Answer 2

首先，我建议您转到 MDN 并复习布局的基础知识。我不明白您要对包含图像的 div 做什么。
对于这种特殊情况，请尝试进行以下更改：

打开浏览器开发者工具并检查有问题的元素。查看应用了哪些样式。
如果您是初学者，我建议您在所有元素上设置一个 1px 的纯黑色边框，以直观地查看您尝试做的事情是否按预期工作。
最后，关于这个特殊的问题，你可以尝试很多不同的事情。我认为，如果您将 img 的样式更改为 {display:block; margin: 0px auto} 它将居中。完全删除包含 div 的内容。
也看看这个 resource.

Answer 3

<img>根本没有居中，不大于也不小于 1235px 视口。

我对代码进行了相关更改，使图像始终居中，代码中有大量注释，如果您有任何问题，请提出。

/*  To illustrate Not needed */

body * {
  padding: 10px;
  border: 1px solid;
}


/* To illustrate Not needed */

.section1 {
  margin: 10px;
  padding: 30px 20px;
}

#NYC_icon {
  /*  To let the element fill the space so we can center the img inside */
  display: block;
  
  
  /* text-align on the parent of the element we want to align */
  /* text-align proerty only aligns inline level elements */
  /* inline level elements are elements with display value
   * set to inline or inline-[something]
   */
  text-align: center;
  
  
  /*     margin-left: 200px; removed not needed*/
  /*     vertical-align: top;  removed not needed*/
}

<div class="section1">

  <div id="NYC_icon">
    <img src="https://picsum.photos/300" alt="NYC">
  </div>

  <div id="Mini_Bio">
    <h1>
      Linda Ye
    </h1>
    <h2>
      <i>NYC
             </i>
    </h2>
    <p>
      Aspiring <strong> coder</strong>, business
      <strong> woman</strong>, avid
      <strong> runner</strong>, and weekend
      <strong> chef</strong>.
    </p>
  </div>
</div>

当我的视口宽度小于 1235 像素时如何将我的照片居中？

How to center my photo when the width of my viewport is less than 1235px?

html

css

media-queries