在不移动背景颜色的情况下将图像居中对齐
Posted
技术标签:
【中文标题】在不移动背景颜色的情况下将图像居中对齐【英文标题】：Aligning the image at the center without the background color moving 【发布时间】：2022-01-22 18:27:49 【问题描述】：抱歉英语不好。您如何将此图像对齐到中心并在页眉和页脚之后的顶部添加空间。 Image Link (bc new user)
如果我尝试了这段代码
margin-left: auto;
margin-right: auto;
width: 50%;
它会移动到中心，但背景也会移动。
我想要的是将图像移动到中心，在页眉和页脚中都有空格。并且背景颜色保持不变。下面是我使用的代码。
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list
.main
position: relative;
display: block;
z-index: 1;
background: #131a28;
.count
background: #131a28;
</style>
【问题讨论】：
.main text-align:center;
哇哦。我从没想过这会奏效。对于这个大声笑，我真是个愚蠢的人。非常感谢。
也可以看看这篇***.com/a/4888157/999011 的帖子了解其他选项。
【参考方案1】：
您可以尝试为图像指定特定高度并将边距设置为自动。
img
width: 300px;
height: 200px;
margin: auto;
这将使图像在其容器 div 中沿两个轴居中。
【讨论】：
除非您将img 分配为 block 或 inline-block 元素，否则不会这样做【参考方案2】：
要使图像居中，请将左右边距设置为自动并使其成为块元素。在这里，我提供了在中心对齐图像的示例代码供您参考。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>【讨论】：
以上是关于在不移动背景颜色的情况下将图像居中对齐的主要内容，如果未能解决你的问题，请参考以下文章
如何在不移动图像下方的背景图像上居中文本？ HTML/CSS
如何在不影响 Pyqt5 中的小部件的情况下将背景图像添加到主窗口