I'm trying something that should be pretty easy but i can't figure out how to make it.
I have html source like this:
<div class="product">
<img src="product123.png" />
</div>`
And some css:
.product {
width: 460px;
height: 460px;
}
.product img {
margin: auto;
display: block;
}
My image is well horizontally-aligned but not vertically. I tried with some position: relative; / bottom: 0; feature but it didn't change anything...
Any idea guys ?
Thank you for your help !
PS: I found this solution center <IMG/> inside a <DIV> with CSS but I'd rather prefer keeping my HTML like this and it seems like unbelievable to not be able to do it "my" way.
Try this - http://jsfiddle.net/tG9UK/
.product {
width: 460px;
height: 460px;
display: table-cell;
vertical-align: middle;
}
If you want to center both vertically and horizontally, you should be able to apply display: table-cell to the div and use vertical-align
.product {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 460px;
height: 460px;
}
.product img {
margin: auto;
display: block;
}
.product {
width: 460px;
height: 460px;
line-height:460px;
text-align:center;
}
http://jsfiddle.net/EHTeL/1/
If the image dimensions are static then something like this would work for you
.product img {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px; /* Half the height */
margin-left: -150px; /* Half the width */
}
Related
Need the image to fill up the rest of the space in the .container class
I have tried setting the width of the image in CSS to width: 100%, but it gives me this:
Picture 1: https://ibb.co/9yKJgvF
If I remove that attribute, it gives me this:
Picture 2: https://ibb.co/K0HpkvJ
HTML
<header>
<div class="container">
<div id="logo_container">
<h1>Hotel<span>Inn</span></h1>
</div>
<img src="../images/sample1.jpg" alt="Image of Hotel">
</div>
</header>
CSS
header{
width: 100%;
height: 100px;
display: block;
background-color: lightblue;
}
.container{
width: 80%;
height: 100%;
display: block;
margin: 0 auto;
background-color: white;
}
#logo_container{
height: 100%;
display: table;
float: left;
}
#logo_container h1{
display: table-cell;
vertical-align: middle;
}
.container img{
height: 100%;
float: right;
I trying to make it such that the height of the image is the same as that in Picture 2 while the image will fill up the rest of the space until it touches the words 'HotelInn'
first of all dont use float for this purpose use absolute layout
remove float in .img
In .container add
position: relative;
z-index: 0;
In .img add
position: absolute;
width: 100%;
height: 100%;
right: 0;
z-index: 0;
this will strech out the image I suggest to use image according to it.....
if you want to strech out the image with perfect ratio use height : auto
and add overflow : hidden in .container
I have a proplem with center img in the div. I read and doing all answers in the questions about center align. And display: flex help me, but it doing my slick-slider jumping. 3 screen it seems good and next jump with no slides 1 second and next good. You can see it in my site. How can i centralize my img in the div without flex and position: absolute? Or how can I doing that without jump slider? I hope guys, you understand my English, and sorry for that simple question...
div {
display: flex!important;
justify-content: center;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
width: 50%;
}
}
<div class="partners multiple-items">
<div>
<img src="img/logo-adata.png">
</div>
</div>
Do you need the img tag?
One way to achieve this is to use background-image instead of img. Simple remove the img tag, then you can center the image as
.img__wrapper {
background-image: url(img/news-img-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
Here is how it can be done with the img tag
.img__wrapper {
height: 100%;
position: relative;
}
.img__wrapper > img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
Try to use
display: table-cell;
vertical-align: middle;
.partners
{
width: 500px;
height: 500px;
border: 1px #aaa solid;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.item{
width: 300px;
margin: auto;
}
<div class="partners multiple-items">
<div class="item">
<img src="http://via.placeholder.com/300x300">
</div>
</div>
div {
display: flex!important;
align-items: center;
outline: none;
height: 100%;
max-height: 100%;
img{
margin: 0 auto;
width: auto;
max-height: 65%;
}
}
It's solve my problem & slider don't jump
div.partners div{
height:500px;width:500px;text-align:center; vertical-align:middle;display:table-cell;
}
I've done a lot of searching and found quite a few answers to this problem, but none of them seemed to work when I tried them in my particular setup. Here is a JSFiddle of the problem I am trying to solve:
http://jsfiddle.net/kr394ye2/1/
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
}
.classB {
width: auto;
height: auto;
max-width: 50px;
max-height: 50px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
I am trying to get the image, which is automatically sized to the div it is contained in, to be centered both horizontally and vertically in the div. I cannot make the image the background of the div.
I have tried auto margins with various types of display (inline, inline-block). I've tried the text-align property, as well as vertical-align. I've tried the center tag. Nothing I tried has worked.
A solution should center the image both horizontally AND vertically.
You could use the inline block + pseudo element tricks.
.classA {
background-color: yellow;
width: 50px;
height: 50px;
float: left;
text-align: center;
font-size: 0;
}
.classA:after {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.classB {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg">
</div>
Note, the solution works only if the image is the only child inside the container, plus the container has a known height set.
By the way <img> is self-closing tag, <img></img> is wrong syntax, just use <img src=""> or <img src="" />.
Add CSS as bellow
.classB {
Margin:auto;
max-width: 50px;
max-height: 50px;
}
If you need vertical AND horizontal centering then this is what you need
http://jsfiddle.net/M_Elf/38kgyzwu/2/
in general
margin:0 auto;
is making wonders
or else: if you only need horizontal centering just use
margin-left:auto;
margin-right:auto;
on your main wrapper
Change your CSS to the following:
.classA {
background-color: yellow;
width: 50px;
height: 50px;
padding: 5px;
}
.classB {
display: block; margin: auto;
object-fit: cover;
max-width: 100%;
height: 100%;
}
The CSS object-fit: cover helps to fit the image without losing quality.
JSFiddle
Read more about object-fit here: object-fit - MDN Docs
You said you tried block and inline-block; did you try display table-cell for the containing div? that generally will give you what to need to force the aligment you are looking for.
Here you go — you need four lines of code (not including css vendor prefixes):
text-align: center; of parent element does the trick for horizontal positioning
position: relative; top: 50%; transform: translateY(-50%); centers image vertically
I added two blocks with different sizes but same other properties for you to see that it's universal. Checked that in latest chrome, safari, IE10 and Opera, it works consistently.
.classA {
background-color: yellow;
width: 300px;
height: 50px;
float: left;
text-align: center;
}
.classB {
width: auto;
height: auto;
max-width: 300px;
max-height: 50px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.classA2 {
background-color: yellow;
width: 100px;
height: 70px;
float: left;
text-align: center;
}
.classB2 {
width: auto;
height: auto;
max-width: 100px;
max-height: 70px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.separator {
display: block;
clear:both;
padding:20px;
}
<div class="classA">
<img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
<div class="separator"></div>
<div class="classA2">
<img class="classB2" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>
Hope this helps :)
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation.
I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the display: table-cell property.
Is this standard behavior, or am I missing something with my code? If it's standard behavior, what's the best solution to my problem?
HTML
<ul>
<li>
<img src="#">
<div class="outer-wrapper">
<div class="inner-wrapper">
<h1>My Title</h1>
<h5>Subtitle</h5>
</div>
</div>
</li>
</ul>
CSS
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}
ul {
background: #CCC;
height: 100%;
width: 100%;
list-style-position: outside;
margin: 0; padding: 0;
}
li {
width: 100%;
display: table;
}
img {
width: 100%;
height: 410px;
}
.outer-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
margin: 0; padding: 0;
}
.inner-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
}
Note: the centered content will be more than 1 element, so I can't use the line-height trick.
jsFiddle.
Putting display:table; inside .outer-wrapper seemed to work...
JSFiddle Link
EDIT: Two Wrappers Using Display Table Cell
I would comment on your answer but i have too little rep :( anyways...
Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly.
JSFiddle
But yeah, the position:absolute lets you place the div over the img, I read too quickly and thought that you couldn't use position:absolute at all, but seems like you figured it out already. Props!
I'm not going to post the source code, after all its 99% timshutes's work, so please refer to his answer, or just use my jsfiddle link
Update: One Wrapper Using Flexbox
It's been a while, and all the cool kids are using flexbox:
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
stuff to be centered
</div>
Full JSFiddle Solution
Browser Support (source): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- prefix), Android 4.1+ (-webkit- prefix)
CSS Tricks: a Guide to Flexbox
How to Center in CSS: input how you want your content to be centered, and it outputs how to do it in html and css. The future is here!
I figured this one out. I know this will help someone someday.
How to Vertically & Horizontally Center a Div Over a Relatively Positioned Image
The key was a 3rd wrapper. I would vote up any answer that uses less wrappers.
HTML
<div class="wrapper">
<img src="my-slide.jpg">
<div class="outer-wrapper">
<div class="table-wrapper">
<div class="table-cell-wrapper">
<h1>My Title</h1>
<p>Subtitle</p>
</div>
</div>
</div>
</div>
CSS
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}
ul {
width: 100%;
height: 100%;
list-style-position: outside;
margin: 0; padding: 0;
}
li {
width: 100%;
display: table;
}
img {
width: 100%;
height: 100%;
}
.outer-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
margin: 0; padding: 0;
}
.table-wrapper {
width: 100%;
height: 100%;
display: table;
vertical-align: middle;
text-align: center;
}
.table-cell-wrapper {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can see the working jsFiddle here.
I discovered that the higher the value of 'width' is, the smaller the box width is made and vice versa. I found this out because I had the same problem earlier. So:
.inner-wrapper {
width: 1%;
}
solves the problem.
Welcome to 2017 these days will using vW and vH do the trick
html, body {
margin: 0; padding: 0;
width: 100%; height: 100%;
}
ul {
background: #CCC;
height: 100%;
width: 100%;
list-style-position: outside;
margin: 0; padding: 0;
}
li {
width: 100%;
display: table;
}
img {
width: 100%;
height: 410px;
}
.outer-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
margin: 0; padding: 0;
}
.inner-wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100vw; /* only change is here "%" to "vw" ! */
height: 100vh; /* only change is here "%" to "vh" ! */
}
<ul>
<li>
<img src="#">
<div class="outer-wrapper">
<div class="inner-wrapper">
<h1>My Title</h1>
<h5>Subtitle</h5>
</div>
</div>
</li>
</ul>
Your 100% means 100% of the viewport, you can fix that using the vw unit besides the % unit at the width. The problem is that 100vw is related to the viewport, besides % is related to parent tag. Do like that:
.table-cell-wrapper {
width: 100vw;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
How about this? (jsFiddle link)
CSS
ul {
background: #CCC;
height: 1000%;
width: 100%;
list-style-position: outside;
margin: 0; padding: 0;
position: absolute;
}
li {
background-color: #EBEBEB;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
display: table;
height: 180px;
overflow: hidden;
width: 200px;
}
.divone{
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
width: 100%;
}
img {
width: 100%;
height: 410px;
}
.wrapper {
position: absolute;
}
Just add min-height:100% and min-width:100% and it will work. I had the same problem. You don't need a 3th wrapper