I have 2 containers, one grey, one white. 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 coul
margin:auto
only works on block elements.
.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.)
Update your .triangle class to this. 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;
}
Please try this code..
.triangle {
display: block;
margin: -80px auto 0;
}
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
.container{
position:relative;
}
.triangle {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -130px;
}
Add position: relative
into .padding-onlytop-lg
. 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;
}