Question

因此，我试图将图像居中放置在我的两列之一中。在这种情况下是左列。以下面的图片为例。

第二列中有一些文本，但是第一列中的图像并不像我想象的那样居中。这是目前的样子。

红色圆圈是我希望我的照片实际位于的位置。

这是我的代码

/* Regular Desktop View */

h1 {
  display: none;
}

img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  text-align: center;
}

h2 {
  text-align: left;
  margin-top: 30px;
}

p {
  margin-right: 50px;
}


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding: 15px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* End regular Desktop View */


/* Tablet/Smartphone view begins */

@media screen and (max-width: 768px) {
  img {
    width: 170px;
    height: 170px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  h1 {
    display: block;
    font-family: sans-serif, arial, verdana, lucida;
  }
  h2 {
    text-align: center;
  }
  p {
    width: 100%;
    padding: 10px;
  }
  /* Home Page */
  .column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" type="text/css" href="main.css">

  <style>
    /* Regular Desktop View */
    
    h1 {
      display: none;
    }
    
    img {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      text-align: center;
    }
    
    h2 {
      text-align: left;
      margin-top: 30px;
    }
    
    p {
      margin-right: 50px;
    }
    /* Create two equal columns that floats next to each other */
    
    .column {
      float: left;
      width: 50%;
      padding: 15px;
    }
    /* Clear floats after the columns */
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* End regular Desktop View */
    /* Tablet/Smartphone view begins */
    
    @media screen and (max-width: 768px) {
      img {
        width: 170px;
        height: 170px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      h1 {
        display: block;
        font-family: sans-serif, arial, verdana, lucida;
      }
      h2 {
        text-align: center;
      }
      p {
        width: 100%;
        padding: 10px;
      }
      /* Home Page */
      .column {
        width: 100%;
      }
    }
  </style>


</head>

<body>

  <ul class="topnav">
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">
    <div class="menu">
      <li><a href="index.html" class="active">Home</a>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </div>
  </ul>

  <h1 align="center">HOME</h1>


  <div class="row">

    <div class="column">
      <img src="img/image1.jpg" class="float-center">
    </div>

    <div class="column">
      <h2>This is an h2 Title</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
        quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
      </p>
    </div>

  </div>

</body>

</html>

当我在桌面模式下全屏查看时，这不是我想要的。但是，当我将浏览器的大小调整为平板电脑/智能手机模式时，我对此感到很满意。我的目标是无论图像在达到像素最大宽度时如何调整大小，都将其居中于第一列。

Answer 1

默认情况下，HTML5中的<img>标签是一个inline-block元素，您可以通过对其应用text-align: center;来使其居中。它说将文本从中心移到中心，这似乎并不直观，但实际上它适用于inline-block类型的所有内容。

在更新后的代码段下方找到一个已添加到第一列的新类.centered，以便仅将其内容居中。

/* Regular Desktop View */

h1 {
  display: none;
}

img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  text-align: center;
}

h2 {
  text-align: left;
  margin-top: 30px;
}

p {
  margin-right: 50px;
}


/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding: 15px;
}

.centered {
  text-align: center;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* End regular Desktop View */


/* Tablet/Smartphone view begins */

@media screen and (max-width: 768px) {
  img {
    width: 170px;
    height: 170px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  h1 {
    display: block;
    font-family: sans-serif, arial, verdana, lucida;
  }
  h2 {
    text-align: center;
  }
  p {
    width: 100%;
    padding: 10px;
  }
  /* Home Page */
  .column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" type="text/css" href="main.css">

  <style>
    /* Regular Desktop View */
    
    h1 {
      display: none;
    }
    
    img {
      width: 170px;
      height: 170px;
      border-radius: 50%;
      text-align: center;
    }
    
    h2 {
      text-align: left;
      margin-top: 30px;
    }
    
    p {
      margin-right: 50px;
    }
    /* Create two equal columns that floats next to each other */
    
    .column {
      float: left;
      width: 50%;
      padding: 15px;
    }
    /* Clear floats after the columns */
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    /* End regular Desktop View */
    /* Tablet/Smartphone view begins */
    
    @media screen and (max-width: 768px) {
      img {
        width: 170px;
        height: 170px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      h1 {
        display: block;
        font-family: sans-serif, arial, verdana, lucida;
      }
      h2 {
        text-align: center;
      }
      p {
        width: 100%;
        padding: 10px;
      }
      /* Home Page */
      .column {
        width: 100%;
      }
    }
  </style>


</head>

<body>

  <ul class="topnav">
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle">
    <div class="menu">
      <li><a href="index.html" class="active">Home</a>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact Me</a></li>
    </div>
  </ul>

  <h1 align="center">HOME</h1>


  <div class="row">

    <div class="column centered">
      <img src="img/image1.jpg" class="float-center">
    </div>

    <div class="column">
      <h2>This is an h2 Title</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
        quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
      </p>
    </div>

  </div>

</body>

</html>

未来的一个好技巧是使HTML与CSS样式分开–尝试在HTML中包含尽可能少的内联样式和<style>标签（如果没有的话），并使用{{ 1}}标签。从this W3Schools tutorial中了解更多信息。

Answer 2

这是我的计划（草图中的）。从台式机到移动设备。

我能够在另一个论坛上提出正确的问题，我得到了这个答案。

HTML

<div class="parent">

  <div class="image">
    <img src="https://i.redd.it/q2iv8opn50kz.jpg" style="width: 170px; height: 170px; border-radius:50%;">
  </div>

  <div class="text">
    <h2>This is an h2 tag</h2>
    <p>
      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions
      from the 1914 translation by H. Rackham.
    </p>
  </div>

</div>

CSS

.parent {
  display: flex; /* Where the mobile part begins */
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  padding: 50px 0 0 30px;
}

.parent div {
  height: 200px;
  width: 300px;
}

img {
  width: 170px;
  height: 170px;
}

现在我把它放在两个稍微有些“列”中，它可以正常工作！

使用CSS在两列之一中居中图像

2 个答案: