将图像放在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;
}