CSS使用元素中心来定位使用百分比的元素的位置

-1

嗨，我正在创建一个网站，我刚刚意识到，当我想要定位html元素时，它将使用右侧的元素来定位元素。这是我的意思的一个例子。我试图用百分比在中心放置图像。修剪我的css代码版本：.image{position:absolute;right:50%; 所以当我加载网站时，它以50％显示在图片的右上角，而不是50％图片的中心。无论如何，使用图像中心定位图片的位置是50％，而不是图片的左边缘或右边缘是50％？我不想像position:absolue;right:45%这样的东西移动图片，而是使用图片的中心来定位图片。如果你需要更多的澄清，请让我知道。CSS使用元素中心来定位使用百分比的元素的位置

来源

2016-08-14 Anish Sethi

欢迎来到SO。在提交问题之前，请尝试搜索选项。这已经被多次询问（并回答）了。谢谢 – Aziz

设置图像的宽度，然后将左右边距设置为自动。

` {width: whatever you want; margin-left: auto; margin-right: auto; } `

来源

2016-08-14 20:40:58

当我设置宽度和边距后，我是否设置位置？ –

对不起，我应该更清楚了。如果你想保持它的绝对位置，先设置，然后加左：0;右：0;然后添加我上面提到的。 –

刚刚尝试过..似乎工作！谢谢！下面是我使用的代码：'.gold {background/image：url（../ pics/emblems/Gold.jpg）; width：200px; left：0; right：0; margin-left：auto; margin-right：auto; position：absolute; text-align：center; '我现在的问题是，左边：0和右边：0做什么？ –

您可以轻松地使用text-align，当你想定位元素是做里面的一些容器，即：

HTML：

<div class="container"> 
     <div class="image">Center me!</div> 
    </div>

CSS：

.container { text-align: center } 
    .image { display: inline-block }

第二种方法：如果知道元素的宽度（.image）。比方说，它是400像素宽：

CSS

.image { 
     position: absolute; 
     left: 50%; 
     margin-left: -200px; 
    }

有点棘手，可能会导致一个问题，当屏幕的宽度比元件的宽度降低。

来源

2016-08-14 20:42:38

谢谢，但对于第一个，我使用了一些文本，所以当我进行文本对齐：居中时，它只会将文本居中对准图像。另外，我忘了提及，但我使用的图像是使用CSS'background-image：url（source）'插入的。 –

CSS使用元素中心来定位使用百分比的元素的位置

回答

相关问题