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

根据您的要求更改margin-top的值

Answer 4

margin:auto仅适用于块元素。

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

（你对margin-left和-right的声明是多余的，因为你无论如何都会在下一行用margin: auto覆盖它们。）

Answer 5

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

将position: relative添加到.padding-onlytop-lg。实施例

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

以流动的方式写作

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