將圖像放在DIV的頂部並居中

Question

我有2個容器，一個灰色，一個白色。 我想將圖像（將是一個向下的三角形）放置在白色背景的最上方，並將其水平居中。 我怎樣才能做到這一點？ 我嘗試了以下方法，但是不起作用

參見https://jsfiddle.net/63s86hf9/

的HTML

<section id="services" class="padding-onlytop-lg">
     <div class="container"><img src="http://placehold.it/92x45" class="triangle" alt="triangle-greg" width="92" height="45">
         <div class="row col-md-10 col-md-offset-1 inner-content padding-onlybottom-lg">

CSS：

.triangle {
margin-left: 0;
margin-right: 0;
margin: auto;
margin-top: -80px;
}

Answer 1

請嘗試此代碼。

.triangle {
    display: block;
    margin: -80px auto 0;
}

Answer 2

將您的.triangle類更新為此。 您需要使其顯示為塊。 並添加底邊距以在標題和圖像之間添加空間。

.triangle {
    margin: auto;
    margin-top: -76px;
    display: block;
    margin-bottom: 30px;
}

Answer 3

嘗試這個

#id{
    text-align: center;
    vertical-align: text-top;
}

要么

#id {
    text-align: center;
   margin-top:0px;
}

根據您的要求更改保證金最高值

Answer 4

margin:auto僅適用於塊元素。

.triangle {
  margin: auto;
  margin-top: -80px;
  display: block;
}

（您對margin-left和-right的聲明是多余的，因為您將用margin: auto覆蓋它們，無論如何在下一行。）

Answer 5

  .container{ position:relative; } .triangle { position: absolute; left: 50%; transform: translateX(-50%); top: -130px; } 

Answer 6

在.padding-onlytop-lg添加position: relative 。 例

.padding-onlytop-lg {
    padding-top: 75px !important;
    position: relative;
}

並以流暢的方式書寫

.triangle {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
}