I've tried everything, but nothing works! transform: translate (50%); seems to work, but it doesn't align it to the exact center. I even tried left: 50%; with it.
I've spent a week figuring it out, and I still can't.
The image I'm trying to align is a logo with the dimensions 660 X 150.
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
<style>
.logo {
position: fixed;
width: 35%;
top: -5px;
height: auto;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
EDIT: No, I want to align the logo to the center of the page. The rectangle div is the background color for the logo.
Also, none of those answers worked. :(
Try this:-
Use display: flex; justify-content: center; element to align img at center.
<div id="rectangle" style="display: flex; justify-content: center;">
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
position: relative;
width: 35%;
top: -5px;
height: auto;
text-align:center;
}
#rectangle {
width: 100%;
height:100px;
background:#101010;
position: fixed;
top: 0;
}
</style>
Instead of using an <img> tag, try using a div and give that image as backgorund with
background-position: center;
background-image=url('image.png');
backgorund-repeat:no-repeat;
background-size:contain;
use this
<div id="rectangle"><img class="logo" src="Untitled.png"></div>
and for style
<style>
.logo {
margin-right:auto;
margin-left:auto;
}
#rectangle {
width: 100%;
height:100px;
vertical-align:center;
}
</style>
try it
<div id="rectangle"> </div>
<img class="logo" src="Untitled.png">
</div>
<style>
.logo {
width: 35%;
height: 150px;
}
#rectangle {
width: 100%;
height: 150px;
background: #101010;
text-align: center;
}
</style>
Are you looking for something like this ?
And yes, avoid using center tag as its deprecated in HTML5.
.center-my-content {
height: 500px;
width: 500px;
position: relative;
border: 1px solid #000;
margin: 0 auto;
}
.logo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id="rectangle" class="center-my-content">
<img class="logo" src="http://www.harpseals.org/images/seals/whitecoat_on_back-photo-eric_baccega_npl-sm.jpg">
</div>
Remove the position: fixed; from the img.
.logo {
height: auto;
width: 35%;
display: block;
margin: 0 auto;
top: -5px;
}
#rectangle {
position: fixed;
width: 100%;
height: 100px;
background: #101010;
top: 0;
}
<div id="rectangle">
<img class="logo" src="image.png"></div>
Related
<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've looked for a previous answer that helped me but couldn't find one.
HTML:
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
CSS:
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 35%;
left: 44.5%;
margin-top: -65px;
margin-left: -33px;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
How do I set it up so that no matter the zoom of the page, the div/image is always horizontally aligned with the text below it?
The site is: http://libeclipse.me/
<html>
<head>
<style>
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position:relative;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 200px;
display: inline-block;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
</body>
<html>
Review this and make note of the margin:auto (Centered the h2text in absolute position) and display:inline-block(Centered the bunny image).
Removed the left % and margins that were present from h1#logo.
Enjoy.
Thanks.
On the h1#logo rule change the left to 50% and the margin-left to -100px
I want to have a div in center vertically and horizontally with display:table, and It is working very well in chrome but Firefox not showing that correctly.
the div id is #content:
#content {
background: red;
width: 367px;
height: 441px;
display: table;
}
.centered {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div id="content" class="centered">
<img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
</div>
jsfiddle
If you can use CSS3, then use transform:translate
See fiddle
This should work
#content {
margin-right: auto;
margin-left: auto;
position: relative;
top: 50%;
transform: translateY(+50%);
}
For css2, you can use table-cell to center contents:
#content {
background: red;
width: 640px;
height: 441px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="content" class="centered">
<img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
<div>test</div>
</div>
If you want center the #content on the page, add this css: margin: 0 auto;
See http://www.w3.org/Style/Examples/007/center.en.html
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}