将图像放在 DIV 的顶部并将其居中答案

【问题标题】：Place an image at the top of a DIV and center it将图像放在 DIV 的顶部并将其居中
【发布时间】：2016-04-09 15:55:38
【问题描述】：

我有 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

请试试这个代码..

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

【讨论】：

【解决方案2】：

将您的 .triangle 类更新为此。您需要使其显示为块。并添加底部边距以在标题和图像之间添加空间。

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

【讨论】：

【解决方案3】：

试试这个

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

或

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

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

【讨论】：

【解决方案4】：

margin:auto 仅适用于块元素。

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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;
}

【讨论】：