在DIV頂部放置一個圖像並居中

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

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

來源

2016-04-09 Greg

請試試這個代碼..

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

來源

2016-04-09 07:41:34

margin:auto只適用於塊元素。

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

來源

2016-04-09 07:42:03 CBroe

更新您的.triangle類本（您的利潤率左和右漢字是多餘的，因爲你與margin: auto在下一行反正覆蓋它們。聲明）。您需要將其顯示爲塊。並添加底部邊距以在標題和圖像之間添加空格。

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

來源

2016-04-09 07:45:45

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

來源

2016-04-09 07:50:54

嘗試邊距的這一

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

或

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

變化值按照您的要求

來源

2016-04-09 07:52:48

將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; 
}

寫

來源

2016-04-09 07:55:38

在DIV頂部放置一個圖像並居中

回答

相關問題