[英]Place an image at the top of a DIV and center it
I have 2 containers, one grey, one white. 我有2个容器,一个灰色,一个白色。 I'd like to place an image (this will be a triangle down) to the very top of the white background and center it horizontally. 我想将图像(将是一个向下的三角形)放置在白色背景的最上方,并将其水平居中。 How could I achieve this? 我怎样才能做到这一点? I have tried the following but that doesn't work 我尝试了以下方法,但是不起作用
See https://jsfiddle.net/63s86hf9/ 参见https://jsfiddle.net/63s86hf9/
HTML 的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: CSS:
.triangle {
margin-left: 0;
margin-right: 0;
margin: auto;
margin-top: -80px;
}
Please try this code.. 请尝试此代码。
.triangle {
display: block;
margin: -80px auto 0;
}
Update your .triangle class to this. 将您的.triangle类更新为此。 You need to make it display as block. 您需要使其显示为块。 And add bottom margin to add space between title and the image. 并添加底边距以在标题和图像之间添加空间。
.triangle {
margin: auto;
margin-top: -76px;
display: block;
margin-bottom: 30px;
}
try this 尝试这个
#id{
text-align: center;
vertical-align: text-top;
}
or 要么
#id {
text-align: center;
margin-top:0px;
}
change value of margin-top according to your requirement 根据您的要求更改保证金最高值
margin:auto
only works on block elements. margin:auto
仅适用于块元素。
.triangle {
margin: auto;
margin-top: -80px;
display: block;
}
(Your declarations for margin-left and -right are superfluous, since you are overwriting them with margin: auto
on the next line anyway.) (您对margin-left和-right的声明是多余的,因为您将用margin: auto
覆盖它们,无论如何在下一行。)
.container{ position:relative; } .triangle { position: absolute; left: 50%; transform: translateX(-50%); top: -130px; }
Add position: relative
into .padding-onlytop-lg
. 在.padding-onlytop-lg
添加position: relative
。 Example 例
.padding-onlytop-lg {
padding-top: 75px !important;
position: relative;
}
And Write in the flowing way 并以流畅的方式书写
.triangle {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.