I am trying to horizontally center an image within a div. However, I haven't been able to. I've tried setting the vertical-align to middle and the margin to auto, 0 auto, and every variation I can think of. Nothing works. Here is the code for how it is currently set up:
img {
border: 0;
margin: 0 auto;
}
.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}
The image is in the intro div. Any advice you can give would be helpful.
If you want to center your image both horizontally & vertically, this should do the trick :
.intro {
display: table;
width: 500px; /* works with any width */
height: 150px; /* works with any height */
background: #ccc;
}
.imgcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
img {
background: #fff;
padding: 10px;
border-radius: 50%;
}
<div class="intro">
<div class="imgcontainer">
<img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
</div>
</div>
Use position:relative in parent .intro and use the code shown below in img, it will work with any width and height
display:block;
margin:auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
Snippet
.intro {
border: dashed red; /* demo */
display:inline-block; /* demo */
vertical-align:top; /* demo */
position: relative
}
.intro img {
border-radius: 50%;
vertical-align: middle;
display: block;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0
}
.intro:first-of-type {
width: 200px;
height: 200px;
}
.intro:last-of-type {
width: 400px;
height: 300px;
}
<div class="intro">
<img src="//lorempixel.com/100/100" />
</div>
<div class="intro">
<img src="//lorempixel.com/100/100" />
</div>
The css style margin: 0 auto; should do the horizontal part of the trick.
For the vertical part you also need to take care of the parent.
Look at How to vertically align an image inside div for more info.
vertical-align works only in table cells. Try to use Flexbox. The element containing your image should have CSS properties:
display: flex;
align-items: center;
Related
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
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 have a problem. I want to achieve something like this:
I have a div with fixed height, and 2 other divs inside, with variable / unknown height, which I want to have
a) vertically centered
b) floating left /right
Right now I am trying something like this.
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
Everything is perfectly centered, but the right div is next to the left one, and not on the right side. As soon as I start to put in
float: right;
into my right class, it is on the right side, but not centered anymore. And I have no clue how to achieve this.
Thank you in advance!
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Try using Flexbox, e.g.
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
display: inline-block;
vertical-align: middle;
background: red;
}
.right {
vertical-align: middle;
background: green;
}
http://jsfiddle.net/hafpuvtq/
More info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to set the html, body elements of height: 100% and margin and padding of 0 outside the container class first before declaring any of the following classes:
HTML
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
top: 50%;
height: 100px;
}
.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2 {
height: 100px;
width: 100px;
background-color: green;
float: right;
}
The left and right both have to contain floats; left box for float: left; and right box for float: right;
That's right - floating an element removes it from the document flow, so it can't align itself to its parent element's line-height. Instead, put a wrapper div around each of the two child elements, and float the wrappers, left and right respectively. Make sure their height is 100%, and then vertically align the children inside them, as you currently are.
See http://jsfiddle.net/conLs2fd/6/.
this answer is just css
.wrapper {
position: relative;
height: 200px;
border: 1px solid gray;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
display:inline-block;
}
.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: gray;
display:inline-block;
}
<div class="wrapper">
<div class="left child">This is left</div>
<div class="right child">This should be right</div>
</div>
Here is one way of doing it that involves using text-align: justify on the .wrapper parent block. If you can specify the height of .wrapper, you
can set line-height to the same value of the height.
Add a :after pseudo-element of height: 0 to force a second line for the line box containing the elements, which will allow the justification to work.
.wrapper {
border: 1px dotted gray;
height: 100px; /* for demo only */
line-height: 100px;
text-align: justify;
}
.wrapper:after {
content: '';
display: inline-block;
height: 0;
width: 100%;
}
.left, .right {
border: 1px dotted blue;
line-height: 1.2;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
I'm trying to set up an anchor that would automatically stretch to match the dimensions of an image that is used as a background. Also, the anchor's text needs to be both horizontally and vertically centered. Here's my current HTML markup:
<div class="wrap">
<img src="http://placehold.it/350x150">
<a href="#">
<span>Anchor</span>
</a>
</div>
The idea is that my .wrap is a fluid column of a grid, so the image stretches to match the width and height is given by the image's ratio. The anchor is displayed as a table for vertical alignmenet and the span has a background visible on hover over the anchor. There is my CSS:
* {
box-sizing: border-box;
}
body {
height: 100%;
}
.wrap {
height: auto;
margin: 2em;
overflow: hidden;
padding: 1em;
position: relative;
width: 80%;
}
.wrap img {
width: 100%;
}
.wrap a {
display: table;
height: 100%;
left: 1em;
padding: 1em;
position: absolute;
text-align: center;
top: 1em;
width: 100%;
}
.wrap a span {
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
.wrap a:hover span {
background: red;
}
The problem I have is the height of the anchor, it refuses to fill the container. Here you have a fiddle: http://jsfiddle.net/xuxG5/3/
I tried looking into other questions around here but unfortunately none of them matched my problem - it's a combination of 100% height table in a fluid parent height but the most common answer was to set height of the parent and the absolute position doesn't make it any simpler.
Question edited to show the anchor's text doesn't always have just one line of text
I was hoping you could help me if there is a CSS solution, otherwise I will use a simple JS script.
This should make the A fill the box - http://jsfiddle.net/xuxG5/5/
.wrap a {
display: block;
left: 2em;
right: 2em;
bottom: 2em;
top: 2em;
position: absolute;
text-align: center;
border: 1px solid red;
}
.wrap a span {
position: absolute;
top: 50%;
margin-top: -1em;
line-height: 2em;
width: 100%;
display: block;
}
I'm now trying another strange and not working thing: the vertical auto alignment of a child div.
I would like the content to be vertically centered within the panel, because the panel have a height in % that fits the window size, it's really important for me to have a strict alignment.
All right, here's my code: JSFiddle
HTML
<div id="panel">
<div id="content">
</div>
</div>
CSS
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: auto;
background-color: rgba(255,255,255,0.3);
}
#content
{
height: 100px;
width: auto;
background-color: rgba(117,169,56,0.9);
}
Why a so simple thing doesn't work?
Hope someone could help me, I've tried these solutions: margin : auto not working vertically? but it actually didn't make the trick
Here is a simple Solution for vertical aligning, using Pure CSS without fixing any top-margin, top-padding. so its totally responcive.
See this Working Fiddle
HTML: (Same)
<div id="panel">
<div id="content">
</div>
</div>
CSS:
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
/*this is new*/
#panel:before
{
content: '';
height: 100%;
margin-left: -5px;
vertical-align: middle;
display: inline-block;
}
#content
{
vertical-align: middle; /*this is new*/
display: inline-block; /*this is new*/
height: 100px;
width: 100%; /*this is new*/
background-color: rgba(117,169,56,0.9);
}