I need to put image of play-button on center of big picture like this https://drive.google.com/file/d/0B-humNPiH1w8Mnp6dWhjcG1kR0E/edit?usp=sharing
Now I got this:
<style type="text/css">
.imgA1 { position:absolute;}
.imgB1 { position:absolute; top: 0px; left: 0px;}
</style>
<img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png">
<img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">
Can somebody help to newby?
Here is the code,
<div class="container">
<img class=imgA1 src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img class=imgB1 src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg" />
</div>
CSS class,
.container {
position: relative;
width: 322px;
height: 346px;
}
.imgB1 {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
DEMO
The simplest way would be set the larger image as the background image of a div & then adjust the play button in the center as shown below.
Adjust height & width as per as image
<style type="text/css">
.ImgContainer {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png");
display: table-cell;
height: 322px;
width: 346px;
text-align: center;
vertical-align: middle;
}
</style>
<div class="ImgContainer">
<img class="imgB1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTDPvq3uKG_PYVLgF4Mg1bqXKmpVzmAhpPdjRhK4dy1QA-PND-iMTuHLg">
</div>
Related
I want to position the img element in the middle of the site.
I already tried to postion it in css with the bottom tag to no avail
CSS:
img {
border-radius: 50%;
display: block;
width: 128px;
margin-left: auto;
margin-right: auto;
}
HTML:
<html>
<div class="logo">
<img src="assets/img/logo-icon.png" alt="Avatar"></div>
A simple option is to place an object in the center, you need to set its absolute position and the width of the parent block in % and then use left and right to center it.
.logo {
width: 10%;
height: 125px;
border-radius: 40%;
position: absolute;
left: 45%;
right: 45%;
top: 40%;
}
<html>
<body>
<div class="logo">
<img src="https://new-world-rpg.ru/wp-content/uploads/c/d/b/cdb30fb67d36f487047a812eef6c458d.jpeg" alt="Avatar">
</div>
</body>
</html>
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</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'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 need help positioning a logo horizontally center. It also needs to be centered vertically to the top of my links div. Can someone help me?
I'd like my logo to look like this:
Below is my HTML and CSS:
HTML - http://codebin.org/view/199faa14
<div id="container">
<div id="logo">
<img src="images/images/logo.gif" />
</div>
<div id="navigation">
navigation
</div>
<div id="header">
</div>
<div id="line">
</div>
<div id="content">
content
</div>
</div>
CSS - http://codebin.org/view/dda88d94
body {
background: url(../images/images/bg_page.gif) center center;
}
#container {
width: 940px;
margin: 0 auto;
}
#header {
height: 281px;
background: url(../images/home/header.gif) top center;
position: relative;
}
#logo {
position: absolute;
z-index: 2;
top: 0px
height: 214px;
margin: 10px auto 0 auto;
}
#navigation {
position: relative;
height: 40px;
background: #fff;
margin-top: 100px
}
#content {
height: 541px;
background: url(../images/home/bg_body.png) top center;
position: relative;
}
#line {
height: 4px;
background: url(../images/home/line.gif) top center;
position: relative;
}
try something like this before using javascript!
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
or this!
.image_container {
width: 300px;
height: 300px;
background: #eee;
text-align: center;
line-height: 300px;
}
.image_container img {
vertical-align: middle;
}
I think I understand your question. Since you are calling out your logo img in the html, try this.
<div id="logo">
<img src="images/images/logo.gif" alt="logo" align="center"/>
</div>
You could achieve this with:
display:inline-block;
line-height;
negative margin
text-align:justify (you have 5 items 4 links & 1 img in middle)
:after
Demo made in a similar context for someone else :
http://dabblet.com/gist/5375725
Some people will facing some problems while using the vertical-align: middle; styling attribute. CSS needs to be written in the prober way. For people looking for a quick fix.
.logo { left:0; top:0; height:100%; width:100px; }
<div class="logo" style="background:url('/assets/images/site-logo.png') center center no-repeat;">
<img src="/site/logo.png" style="display:none;" />
</div>
*make sure the container has the position:relative; css attribute.
It's easy handeling retina and compatible with all kind of CSS markups. hope this simple technique can save some time for people :)