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使用元素中心來定位使用百分比的元素的位置

回答

相關問題