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 could I achieve this? I have tried the following but that doesn't work
See 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;
}
Please try this code..
.triangle {
display: block;
margin: -80px auto 0;
}
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;
}
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.
.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.)
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.