如何使此图像居中？ [复制]答案

【问题标题】：How do I make this image sit central? [duplicate]如何使此图像居中？ [复制]
【发布时间】：2020-08-17 08:54:26
【问题描述】：

我试图让这张图片位于页面的中心（请点击下面的链接查看参考）。

我尝试了一些不同的方法，但似乎没有任何效果。我敢肯定这很简单，但我是新手，需要一些帮助。谢谢。

.homepage-image {
    display: inline-block;
    float: middle;
}

<!doctype html>
<html>

	<head>
		<title>???? shannonkelseyann</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

		<header>
			<nav>
				<h1><img src="https://i.imgur.com/Nj06vm2.gif" alt="Image" align="right" height="65" width="650"></a></h1>
				<ul>
					<br><br><br><li><img src="https://i.imgur.com/c2UQ8om.png"></li>
					<br><li><a href="advertising.html"><img src="https://i.imgur.com/cQE71uK.png"></a></li>
					<br><li><a href="e-commerce.html"><img src="https://i.imgur.com/01tEvO3.png"></a></li>
					<br><li><a href="info.html"><img src="https://i.imgur.com/JjNQ54R.png"></a></li>
				</ul>
			</nav>
		<img class="homepage-image" src="https://i.imgur.com/O5ZNaft.png" alt="euan" width="30%" height="30%">
		</header>


		<footer><p style="text-align: center;">©2020 by shannonkelseyann <p style="text-align: right;"><img class="heart-image" src="https://i.imgur.com/Ql5LJ2c.png" alt="heart"></p></footer></p>

	</body>
</html>

【问题讨论】：

你想在中间找到哪个元素？心或图片。
您能否提供更多关于您尝试居中的图像的信息（以及是否可以提供您已经尝试过的图像）？

标签： html css image layout

【解决方案1】：

这是一种快速而肮脏的方式，我个人更喜欢将图像包装在一个容器中并给容器一个弹性框，或者如果宽度定义为边距：0 auto。

TLDR：您可以使用 display: block; 将 img 制作成块元素。并用 Margin: 0 auto; 把它放到中间；

【讨论】：

【解决方案2】：

你有两种方法来完成这个任务

1.  .homepage-image {
       display: flex;
       justify-content: center;
    } 

2.  .homepage-image {
       display: block;
       margin: 0 auto;
    }

通过这个你可以很容易地解决你的问题。

【讨论】：

【解决方案3】：

如果您愿意，您可以在图像周围加上<div>，然后将text-align: center; 添加到<div>。我还从 .homepage-image` CSS 中删除了 float: middle;。

.homepage-image {
    display: inline-block;
}

<head>
  <title>? shannonkelseyann</title>
  <link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header>
    <nav>
      <h1><img src="https://i.imgur.com/Nj06vm2.gif" alt="Image" align="right" height="65" width="650"></a></h1>
      <ul>
        <br><br><br><li><img src="https://i.imgur.com/c2UQ8om.png"></li>
        <br><li><a href="advertising.html"><img src="https://i.imgur.com/cQE71uK.png"></a></li>
        <br><li><a href="e-commerce.html"><img src="https://i.imgur.com/01tEvO3.png"></a></li>
        <br><li><a href="info.html"><img src="https://i.imgur.com/JjNQ54R.png"></a></li>
      </ul>
    </nav>
    <div class="image" style="text-align: center;">
      <img class="homepage-image" src="https://i.imgur.com/O5ZNaft.png" alt="euan" width="30%" height="30%">
    </div>
  </header>


  <footer><p style="text-align: center;">©2020 by shannonkelseyann <p style="text-align: right;"><img class="heart-image" src="https://i.imgur.com/Ql5LJ2c.png" alt="heart"></p></footer></p>

</body>

【讨论】：