I am centering an image in the following code but as I center it the background fades.I have managed to put the image in the center but with the background color. How to fix this ? Please do tell how to position image as well?
HTML
<section id="contact">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-5 centered">
<img src="something.jpg" alt="">
</div>
</div>
</div>
</section>
CSS
#contact
{
background-color:black;
}
.container
{
text-align: center;
position:absolute;
margin:0;
padding:0;
top:50%;
left:50%;
transform: translate3d(-50%, -50%,0);
}
#contact .centered
{
float:none;
margin:0 auto;
}
#contact img
{
border-radius:50%;
border: 4px solid #fff;
}
If you give outer position absolute and container position relative , it can help you and for left, top 50% values, make them in the outer div because you put them one within the other
#contact{
background-color: black;
position: absolute;
top: 50%;
left: 50%;
}
.container
{
text-align: center;
position: relative;
margin: 0;
padding: 0;
top: 50%;
/* left: 50%; */
/* transform: translate3d(-50%, -50%,0); */
}
https://jsfiddle.net/hemnathmouli/jp7gydwf/
Try this.
<div class = "image">
<img src = "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" alt="myimage">
<span class = "caption">
Hello World.!
</span>
</div>
Css:
.image{
position: relative;
text-align: center;
display: table;
}
.caption{
position: absolute;
background: black;
padding: 10px;
color: white;
width: 100px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This will work transform: translate(-50%, -50%);
Related
I want to place a button on a border of a div that is clipped through the clip-path property. i have been able to clip the border but can't seem to place the button on the curved border. i have tried everything but can't seem to figure it out. Any help would be appreciated. Thanks in advance. I have posted the code below. Please check it out! Thanks.
.learningSection {
width: 100%;
height: auto;
background: linear-gradient(90deg, #6a0bf5 -0.87%, #2461ed 100%);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
padding: 65px;
}
.freeTrialBtn {
width: 217px;
height: 35px;
background: #11ee92;
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
border-radius: 25px;
align-items: center;
border: 0;
}
#media only screen and (max-width: 490px)
.learningSection {
content: "";
position: relative;
clip-path: ellipse(400px 100% at top);
}
<div class="learningSection">
<div class="learningSectionTextandBtn">
<h1 class="learningHeading">Start Learning</h1>
<p class="learningText">
Learn 12 different languages in just ten minutes a day.
</p>
<form action="/enternumber" id="enternumber" method="POST">
<input type="hidden" name="pckg" id="daily" value="jazz-sku-1-day" />
<button class="freeTrialBtn" style="margin-top: 20px;">
<p style="text-align:center;margin: 0;">Start Free Trial!</p>
</button>
</form></div>
I want the result the image to be like this
but the result is this
I hope you know what you are doing with Clip-path but remember that clip-path , CLIPS all its container so every element will get removed so you can't use elements on its border because they will get clipped so you need to use another container to use elements on it. Here is the code with clip-path.
body {
margin: 0;
padding: 0;
}
.container {
background-color: green;
width: auto;
position: relative;
height: 450px;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
margin:0 auto;
clip-path: ellipse(1000px 100% at top);
}
.backgroundContainer {
width: 100vw;
height: 500px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="parent">
<div class="backgroundContainer"></div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
<button class="btn">Click Me</button>
</div>
hope i explained it well
I did it without the clip-path so if you must use clip-path you can change some of it .
i used the border-radius and position absolute to make a backGround and then placed the button where i wanted it
body {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
background-color:yellow;
}
.backgroundContainer {
width: 120vw;
height: 400px;
background-color: blue;
position: absolute;
left: -10%;
top: 0;
border-radius: 0% 0% 50% 50%;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="backgroundContainer">
</div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
<button class="btn">Click Me</button>
</div>
How do you center h1 in an img element, when the image is 100% of screens width and always maintaining aspect ratio? This pen shows what I mean. I've seen some answers here on SO, but the image always had width and height fixed.
to achieve your goal you need to put both img and h1 into a div and use positioning to center the h1
#headerImage {
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
#greeting{
padding: 0px;
position: relative;
}
#greetin-h1{
text-align: center;
color:#000;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index: 9999;
}
<div id="greeting">
<img id="headerImage" src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt=""/>
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
Why not using the image as background?
html, body{
width: 100vw;
}
#greeting{
padding: 140px 20px 50px 20px;
background-image: url("http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#greetin-h1{
text-align: center;
color:black;
}
<div id="greeting">
<h1 id="greetin-h1">THIS IS H1 ELEMENT</h1>
</div>
greeting add css style
#greetin {
padding: 140px 20px 50px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use a combination of relative and absolute positioning, table and table-cell display like this:
CSS:
#headerImage {
position: relative;
text-align: center;
display: inline-block;
}
#headerImage img {
max-width: 100%;
}
#greeting {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#greetin-h1 {
margin: 0;
display: table;
width: 100%;
height: 100%;
}
#greetin-h1 span {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="headerImage">
<div id="greeting">
<h1 id="greetin-h1"><span>THIS IS H1 ELEMENT</span></h1>
</div>
<img src="http://study.com/cimages/course-image/intro-to-business-syllabus-resource-lesson-plans_138757_large.jpg" alt="">
</div>
Fiddle: https://jsfiddle.net/ve8sot21/1
This way the h1 will always be centered horizontally and vertically no matter the image dimension.
.wrapper {
position: relative;
}
img {
display: block;
width: 100%;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: gold;
}
<div class="wrapper">
<img src="https://www.propointgraphics.com/wp-content/uploads/2016/01/stock-photos-vince_3219813k.jpg" alt="">
<h1>Hello, World!</h1>
</div>
I try to set up an image inside the frame.
STYLE
#wrapper {
border: 2px solid black;
width: 600px;
height: 400px;
overflow:hidden;
position: relative;
display: inline-block;
}
img{
position: absolute;
height:auto;
}
HTML
<div id="wrapper">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img" />
</div>
<br>
<div id="wrapper">
<img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img" />
</div>
Is there any way to make sure the image is showing in the middle of frame like this ?
Something like this:
#wrapper {
border: 2px solid black;
width: 600px;
height: 400px;
overflow:hidden;
position: relative;
display: inline-block;
text-align:center;
}
img{
max-width: 100%;
}
<div id="wrapper">
<img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="our img" />
</div>
<br>
<div id="wrapper">
<img src="http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg" alt="our img" />
</div>
You can do this:
Use transform to center the image vertically and horizontally
CSS
img{
position: absolute;
height:auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
DEMO HERE
Here's my recommendation:
#wrapper {
text-align:center;
border: 2px solid black;
width: 600px;
height: 400px;
overflow:hidden;
position: relative;
}
img{
display: inline-block;
height:auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
And the working jfiddle: https://jsfiddle.net/o0efwd20/
This will center your img:
img{
display:block;
position: absolute;
height:auto;
margin:0 auto;
}
I'm learning HTML & CSS so I'm trying to copycat Coder Manual.
I made a div for the background (I'll just use one color for now) and another div for the content of that first blue section with the logo, navigation, etc..
However, I can't make the content div overlay the background div without using something like:
#content {
position: absolute;
top: 0;
}
but that prevents me from centering the content div using:
#content {
width: 50%;
margin: 0 auto;
}
What should I do in such situation?
Edit: here's the html:
<!DOCTYPE html>
<html>
<head>
<title>CM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
<div id="blue-div">
</div>
</body>
</html>
You can use transform to center it like this:
1-With position: absolute in an element with a known width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
margin-left: -20px; /*the half width */
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
2- With position: absolute in an element with an unknown width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
3- Centering even vertically
.center{
height: 80px;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
Personally, I do something like this:
.bg {
width: 100%;
}
.bg-blue {
background-color: blue;
}
.content {
text-align: center;
}
<div class="bg bg-blue">
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
</div>
but if you need to keep the divs seperate:
#BgBlue {
position: absolute;
top: 0;
z-index: -1;
height: 50px;
width: 100%;
background-color: blue;
}
.content {
text-align: center;
}
<div id="BgBlue">
</div>
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
I have images that are responsive in size and I'm trying to overlay a play icon in the center of them. I'm able to center the icon vertically but not horizontally.
See my jsfidde
HTML:
<div class="img-container">
<img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;">
<div class="post-video-overlay-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</div>
</div>
CSS:
.post-video-overlay-lg {
position: absolute;
font-size: 72px;
color: #E5E5E5;
text-align: center;
width: 100%;
}
.img-container {
position: relative;
width:315px;
height:auto;
display:block;
margin:auto;
cursor:pointer;
}
Any idea what I'm missing?
Firstly you have to position the overlay div over the image/video..then position the span.
.post-video-overlay-lg {
position: absolute;
top:0;
left:0;
font-size: 72px;
color: #E5E5E5;
text-align: center;
width: 100%;
height: 100%;
}
.post-video-overlay-lg span {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.img-container {
position: relative;
margin: auto;
width:315px;
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.img-container img {
display: block;
}
<div class="img-container">
<img src="http://i.vimeocdn.com/video/503897818_640.jpg" style="width:315px;height:177px;" />
<div class="post-video-overlay-lg">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</div>
</div>
JSfiddle Demo
Here is the Fiddle: http://jsfiddle.net/f1becapq/3/
Updated the css for .post-video-overlay-lg
.post-video-overlay-lg {
position: absolute;
font-size: 72px;
color: #E5E5E5;
text-align: center;
left: 0;
right: 0;
top: -webkit-calc(50% - 36px); /* 36px = 72px/2 */
top: -moz-calc(50% - 36px);
top: calc(50% - 36px);
}
Used the CSS calc function to vertically align the div in runtime